[Resolved] Height of header

[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!

[David]

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

[Rob]

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

[David]

Glad to be of help

[Author]

Posts