[Resolved] Height of header

Home Forums Support Height of header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1303294
    Rob

    I’m using ‘navigation as header’ but I found my header logo was too small. So I used the slider in the Layout > Primary Navigation tab. I got it so it displays the way I want it on desktop, but on mobile, it pushes the hamburger menu down so that it’s sitting underneath the logo. I’ve also tried adjusting the mobile header breakpoint but I can’t the desired result with that either. I looked at some other sites that use GP and this website has an even higher navigation header than I want: https://www.acmefinishing.com/

    And their logo is even wider than mine. Yet when I viewed it on mobile, the hamburger menu is where it should be (at the far right of the nav bar). I’m wondering how they achieved that?

    I’ve looked through some of the knowledge base and the support queries. I came across some css for controlling the height of the logo. I tried using that css but it doesn’t resolve my problem.

    Is there an article you can point me to?

    Many thanks!

    #1303421
    David
    Staff
    Customer Support

    Hi there,

    the simplest solution would be to enable the Mobile Header in Customizer > Layout > Header:

    https://docs.generatepress.com/article/mobile-header/

    Here you can add a different logo which is more suitable for Mobile.

    Or alternatively this CSS to resize your current logo for mobile:

    @media(max-width: 768px) {
        .main-navigation .navigation-branding img {
            height:60px;
        }
    }
    #1304094
    Rob

    Thanks, that solved it (using the css for mobile logo) 🙂

    #1304562
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.