Verwendung: Logo zentrieren

s.remmers's Avatar

s.remmers

23 Jun, 2015 08:35 AM

Produkt: Tao Contao
Contao-Version: 3
Browser und Browserversionen: chrome

Ist es möglich das Logo zu zentrieren und die Navigation zentriert darunter zu plazieren? Schade, dass Sie dieses nicht als Option anbieten.

  1. Support Staff 1 Posted by RockSolid Theme... on 23 Jun, 2015 09:16 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Nachricht.

    Ihre Frage betrifft eine individuelle Anpassung. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:

    Fügen Sie bitte folgenden CSS-Code in die Datei files/tao/css/custom.css ein:

    .logo {
        position: static;
        text-align: center;
    }
    .logo > a {
        display: inline-block;
    }
    .logo img {
        height: 5em;
    }
    
  2. 2 Posted by s.remmers on 23 Jun, 2015 09:25 AM

    s.remmers's Avatar

    Vielen Dank für die Rückmeldung obwohl Sie individuelle Anpassungen eigentlich nicht unterstützen.
    Leider ist mir so nicht geholfen, da ich nicht weiss wie ich das Menu darunter zentrieren kann. :-(

    Liebe Grüsse aus dem nassen Deutschland

  3. Support Staff 3 Posted by RockSolid Theme... on 23 Jun, 2015 01:23 PM

    RockSolid Themes's Avatar

    Mit folgendem CSS wird auch die Navigation zentriert:

    .logo {
        position: static;
        text-align: center;
    }
    .logo > a {
        display: inline-block;
    }
    .logo img {
        height: 5em;
    }
    .main-navigation {
        display: inline-block;
        float: none;
        height: 3.125em;
        height: calc(100% - 5.25em);
    }
    .header-navigation-inner {
        height: 10.5em;
        min-height: 8.125em;
        text-align: center;
    }
    

    Bitte beachten Sie, dass diese Anpassung eventuell weitere Anpassungen nach sich ziehen kann um in allen Browsern und auf allen Geräten einwandfrei zu funktionieren.

  4. 4 Posted by Dursun on 26 Jan, 2017 12:50 PM

    Dursun's Avatar

    Das Problem ist aber, dass beim Scrollen das Logo nicht verkleinert wird.
    Es bleibt in der fixen Größe.

    Wie kann ich es zentrieren und beim scrollen dennoch verkleinern?

    Ich bitte nochmals um euren Lösungsvorschlag.

    Viele Grüße
    Dursun

  5. Support Staff 5 Posted by RockSolid Theme... on 27 Jan, 2017 07:37 AM

    RockSolid Themes's Avatar

    Bitte versuchen Sie es mit folgendem CSS-Code:

    .logo {
        position: static;
        text-align: center;
        height: 50%;
    }
    .logo > a {
        display: inline-block;
        height: 100%;
    }
    .logo img {
        height: 100%;
    }
    .main-navigation {
        display: inline-block;
        float: none;
        height: 3.125em;
        height: 50%;
    }
    .header-navigation-inner {
        height: 10.5em;
        min-height: 6.125em;
        text-align: center;
    }
    
  6. 6 Posted by V. Klemm on 02 Feb, 2017 01:58 PM

    V. Klemm's Avatar

    Ich habe das selbe vor. Das Logo zentriert und darunter auch zentriert die Navigation. Mit dem obigen CSS-Code bleibt das Logo links. Die Navigation ist zentriert, aber auf gleicher Höhe wie das Logo.
    Über eine Lösung wäre ich dankbar.

  7. Support Staff 7 Posted by RockSolid Theme... on 02 Feb, 2017 02:29 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Wenn der oben angeführte CSS-Code in Ihrer Installation nicht funktioniert, schicken Sie uns bitte einen Link zur betroffenen Seite, damit wir genauer untersuchen können warum die Darstellung nicht zentriert ist.

  8. Support Staff 8 Posted by RockSolid Theme... on 02 Feb, 2017 03:52 PM

    RockSolid Themes's Avatar

    Anscheinend haben Sie die custom.css-Datei mit der Kodierung „UTF-8 mit BOM“ gespeichert, dadurch wird die erste CSS-Regel ignoriert. Bitte speichern Sie die Datei als „UTF-8“ (ohne BOM).

  9. 9 Posted by Vera Klemm on 14 Feb, 2017 02:15 PM

    Vera Klemm's Avatar

    Vielen Dank. Genau so war es.

    Nun ist die Navigation leider nicht ganz zentriert, sondern etwas weiter nach links versetzt (alle Browser).Außerdem springt das Logo, wenn es beim herunterscrollen verkleinert wird, etwas nach links. Dieser Versatz des Logos ist der Fall bei Chrome und Internet Explorer.
    Über eine Lösung würde ich mich freuen.

    Viele Grüße
    Vera Klemm

  10. Support Staff 10 Posted by RockSolid Theme... on 15 Feb, 2017 08:34 AM

    RockSolid Themes's Avatar

    Verwenden Sie bitte zusätzlich noch folgenden CSS-Code:

    .logo > a {
        display: inline;
    }
    .logo img {
        margin: 0 auto;
    }
    .main-navigation {
        margin-right: 0;
        padding-right: 0;
    }
    
  11. 11 Posted by Jörg on 30 Aug, 2018 08:12 AM

    Jörg's Avatar

    Sorry, wenn ich das Thema nochmals hochhole.
    Ich habe alles nach den o.g. Vorgaben gemacht. Passt alles prima.

    Ich habe aber folgendes Problem. Die Navigation bleibt auch in der mobilen Ansicht stehen und verschwindet nicht.
    Folgenden Code habe ich in die custom.css eingefügt:
    .logo {
        position: static;
        text-align: center;
        height: 50%;
    }
    .logo > a {
        display: inline-block;
        height: 100%;
    }
    .logo img {
        height: 100%;
    }
    .main-navigation {
        display: inline-block;
        float: none;
        height: 3.125em;
        height: 50%;
    }
    .header-navigation-inner {
        height: 10.5em;
        min-height: 6.125em;
        text-align: center;
    }

    .logo > a {
        display: inline;
    }
    .logo img {
        margin: 0 auto;
    }
    .main-navigation {
        margin-right: 0;
        padding-right: 0;
    }

    Danke für die Hilfe bei der Problemlösung!

  12. Support Staff 12 Posted by RockSolid Theme... on 31 Aug, 2018 07:23 AM

    RockSolid Themes's Avatar

    Fügen Sie bitte noch folgenden CSS-Code hinzu:

    @media screen and (max-width: 599px) {
        .main-navigation {
            display: none;
        }
    }
    
  13. 13 Posted by Jörg on 31 Aug, 2018 07:40 AM

    Jörg's Avatar

    Perfekt! Danke!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac