Home → Contao →

Logo / Headergröße

• Edit

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

• support.jpg 89.9 KB

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

   

   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.

   • Edit

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

   

   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

   • Edit

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

   

   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;
   }
   

   • Edit

4. 4 Posted by Hössel on 15 Aug, 2015 04:37 PM

   

   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!

   • Edit

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

   

   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;
   }
   

   • Edit

6. 6 Posted by Hössel on 17 Aug, 2015 08:41 AM

   

   Hallo!

   Klappt einwandfrei!

   Vielen Dank!

   • Edit

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

   

   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!

   • Edit

8. Support Staff 8 Posted by RockSolid Theme... on 09 Oct, 2015 08:34 AM

   

   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;
       }
   }
   

   • Edit

9. 9 Posted by worxer on 09 Oct, 2015 10:22 AM

   

   Großartig, Danke!

   • Edit

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

    

    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

    • Edit

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

    

    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;
        }
    }
    

    • Edit

12. 12 Posted by imberador on 08 Feb, 2018 11:00 AM

    

    Hat geklappt - Vielen Dannk!

    • Edit

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

    

    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.

    • Unbenannt.PNG 3.92 KB
    • Edit

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

    

    Vielen Dank für Ihre Frage.

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

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

    • Edit