[Resolved] Mobile – Inline Logo & Toggle menu when hooked header

[Simon]

Hi guys

I have an issue where the mobile toggle menu is stacking under the header. I’m using a hooked header, 2 different versions applied to differing pages under the elements function.

Is there some CSS I can apply to this view to keep the header logo and toggle menu inline to avoid this.

Here are the 2 options of the 2 header types:-
Light version : http://devsite1.thrivedynamics.co.uk/services/
Dark version : http://devsite1.thrivedynamics.co.uk/services/accounting/

Some mobile screenshots using my phone:-
Light version : https://ibb.co/c2cnJDJ
Dark version : https://ibb.co/WFQr5ms

Hope you can help.

Thanks
Simon

[David]

Hi there,

the simplest fix is to use the Mobile Header:

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

and select a smaller logo for the mobile header.

[Simon]

Thanks David,

I have tried that, but then the same logo & toggle colour is then used on all pages, where as it’s important for me to have & light & dark themed header for different pages.

Is there a workaround please, to just simply resize the header logo on mobile view, I have tried a few ccs options with no use so far?

Thanks
Simon

[Leo]

By default, the logo should be inline with the logo with the layout you are using.

The issue here is that the logo is too wide so there isn’t enough room.

Can you try reducing the menu item height with mobile toggle activated and see if that works?
https://docs.generatepress.com/article/menu-item-height-width/#height

If not then give this CSS a shot to resize the logo on mobile:

@media (max-width: 768px) {
    .navigation-branding img {
        height: 65px;
        width: auto;
    }
}

[Simon]

Thanks Leo

I applied the CSS and that did the trick.

Thanks for all your help – you guys rock and that’s why I always use GP for my sites, and always will 🙂

Cheers
Simon

[Leo]

No problem 🙂

[Author]

Posts