Logo / Headergröße

heiko's Avatar

heiko

21 Jul, 2014 12:38 PM

Hallo zusammen,

1) wo kann ich Theme Designer die Headerhöhe einstellen. Jetzt verkleinert sich das Logo auf die bestehende kurze Höhe. Bei den Einstellen "Logo" kann ich nur die Abstände links, rechts, oben und unten einstellen, wobei sich da der Header nicht vergrößert, sondern nur das Logo verkleinert bzw. ganz verschwindet.

2) wo kann ich die Positionierung der Hauptnavi einstellen, da ich es unten am Logorand ausrichten möchte und nicht mittig.

Besten Dank für die Info..

Heiko

  1. Support Staff 1 Posted by RockSolid Theme... on 22 Jul, 2014 11:46 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Die Höhe des Headers können Sie mit folgendem CSS verändern:

    .header-navigation-inner {
        height: 150px;
    }
    

    Da sich die Höhe des Headers bei Scrollen verändert, ist die Positionierung der Navigationspunkte prozentual angegeben. Mit folgendem CSS können die Navigationspunkte nach unten geschoben werden.

    .main-navigation > ul > li > a:before,
    .main-navigation > ul > li > span.active:before,
    .main-navigation > ul > li > span.trail:before,
    .main-navigation > ul > li > span.forward:before {
        height: 70%;
    }
    

    Fügen Sie die CSS-Anweisungen in die Datei files/tao/css/custom.css ein.

  2. 2 Posted by Philipp Mathey on 23 Oct, 2014 10:00 AM

    Philipp Mathey's Avatar

    Hi,
    wie kann ich die Größe des Headers inkl. der Verkleinerung beim Scrollen beeinflussen? Ich gehe davon aus, dass dies per Javascript gelöst ist, kann aber in keiner der eingebundenen Dateien das entsprechende Snippet finden. Ich möchte gerne in den Header eine zweite Navigation einbinden, hierfür muss ich den header vergrößern, möchte aber weiterhin den Verkleinerungseffekt beim Scrollen haben (also nicht per !important den inline-style der Höhe überschreieben). Wo kann ich das tun?

    Besten Dank und Gruß,
    Philipp

  3. Support Staff 3 Posted by RockSolid Theme... on 23 Oct, 2014 10:22 AM

    RockSolid Themes's Avatar

    Die Größe des Headers wird über den CSS-Selektor .header-navigation-inner mit den Eigenschaften height (Anfangsgröße) und min-height (Größe nach dem Scrollen) geregelt. Sie können diese Werte beliebig verändern, der JavaScript-Effekt passt sich dementsprechend an.

    .header-navigation-inner {
        height: 5.25em;
        min-height: 3.125em;
    }
    
  4. 4 Posted by Hössel on 15 Aug, 2015 04:37 PM

    Hössel's Avatar

    Hallo!

    Ich verwende das Theme "Tao".
    Nun möchte ich dass sich beim Scrollen die Größe des Logos und die Höhe der sticky Header-Navigation nicht verändert.

    Wie mache ich das?

    Vielen Dank!

  5. Support Staff 5 Posted by RockSolid Theme... on 17 Aug, 2015 08:17 AM

    RockSolid Themes's Avatar

    Das können Sie erreichen, indem Sie die Anfangsgröße und die Größe nach dem Scrollen auf den gleichen Wert setzen. Z. B.:

    .header-navigation-inner {
        height: 5.25em;
        min-height: 5.25em;
    }
    
  6. 6 Posted by Hössel on 17 Aug, 2015 08:41 AM

    Hössel's Avatar

    Hallo!

    Klappt einwandfrei!

    Vielen Dank!

  7. 7 Posted by worxer on 08 Oct, 2015 02:45 PM

    worxer's Avatar

    Hi,
    ich möchte die Hauptnavigation linksbündig unter dem Logo plazieren. Beim scrollen soll lediglich das Logo verkleinert werden.

    Ist das möglich?

    Viele Grüße!

  8. Support Staff 8 Posted by RockSolid Theme... on 09 Oct, 2015 08:34 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:

    .header-navigation-inner {
        height: 10em;
        min-height: 7em;
    }
    @media screen and (max-width: 900px) {
        .header-navigation-inner {
            height: auto;
            min-height: 0;
        }
    }
    .logo {
        top: 1em;
        bottom: 4em;
    }
    .main-navigation {
        position: absolute;
        left: 2%;
        bottom: 0;
        width: 96%;
        height: 4em;
    }
    @media screen and (max-width: 900px) {
        .main-navigation {
            position:relative;
            bottom: auto;
            left: auto;
            height:3.125em;
        }
    }
    
  9. 9 Posted by worxer on 09 Oct, 2015 10:22 AM

    worxer's Avatar

    Großartig, Danke!

  10. 10 Posted by imberador on 08 Feb, 2018 10:21 AM

    imberador's Avatar

    Hallo,
    ich habe bei ONEO mit Hilfe von
    .main-navigation-wrapper {
      height: 100px;
    }
    Das Logo vergrößern können.

    Nun habe ich das Problem, dass das Logo am unteren Bildschirmrand teilweise verschwindet, wenn ich die Seite neu lade.
    D. h., dass das was das Logo nun größer ist, außerhalb des unteren Bildschirmrandes liegt.
    Muss da der Slider oben auch noch angepasst werden? Wenn ja, wie?

    Veile Grüße

  11. Support Staff 11 Posted by RockSolid Theme... on 08 Feb, 2018 10:47 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Verwenden Sie dafür bitte folgenden CSS-Code:

    @media screen and (min-height: 600px) {
        .main-slider {
            height: calc(100vh - 100px);
        }
    }
    @media screen and (max-width: 599px) {
        .main-slider {
            height: auto;
        }
    }
    
  12. 12 Posted by imberador on 08 Feb, 2018 11:00 AM

    imberador's Avatar

    Hat geklappt - Vielen Dannk!

  13. 13 Posted by Taobao on 04 May, 2018 07:45 AM

    Taobao's Avatar

    Für das oben genannte Snippet:

    ".main-navigation > ul > li > a:before,
    .main-navigation > ul > li > span.active:before,
    .main-navigation > ul > li > span.trail:before,
    .main-navigation > ul > li > span.forward:before {
        height: 70%;
    }"

    ...habe ich alternativ verwendet:

    .main-navigation > ul > li > a::before,
    .main-navigation > ul > li > strong::before,
    .main-navigation > ul > li > span.active::before,
    .main-navigation > ul > li > span.trail::before,
    .main-navigation > ul > li > span.forward::before {
        height: 70%;
    }

    Der Vorteil ist, dass dann auch der aktive a href nach unten rutscht.

    Aber ich habe noch eine Frage zum Such-Formular. Ich schaffe es einfach nicht, das Formular ebenfalls in den unteren Bereich von DIV header-navigation-inner zu bewegen und es sieht deshalb auch aus wie auf dem Screenshot.

    Frage: Wie ist die custom.css einzustellen, damit die Lupe in Höhe der Navigation liegt.

  14. Support Staff 14 Posted by RockSolid Theme... on 04 May, 2018 01:21 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Dafür können Sie folgenden CSS-Code verwenden:

    .main-navigation-search {
        top: 70%;
    }
    

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • support.jpg 89.9 KB

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