Mobile menu design

Let's remove all of the menu related CSS for now - but be sure to back it up in case we need to re-add it.

Then I would up your menu item height to something like 50px in "Customize > Layout > Primary Navigation".

Hi Leo!

Al menu related CSS is commented now and the menu item height changed!

This CSS is still adding space to the top and to the right of the menu, you may want to remove it:

@media only screen and (max-device-width: 1600px) and (min-device-width: 1200px) {

    .inside-navigation {
        margin-top: 50px;
        margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 45px;
    }
}

Then on mobile, you can center the logo like this:

#mobile-header .site-logo {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    margin-right: auto;
    margin-left: auto;
}

#mobile-header .menu-toggle {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

That should get you quite a bit closer to their layout.

Thanks so much Tom!

I've applied your rules and some own ones and now the layout is more likely the one I want to achieve!

Only three things I couldn't resolve and maybe you can help me! Instead I have selected the navigation logo in both static and sticky menu, when I scroll down, the logo dissapears. I was searching for the rule which is hidding it, but with no luck.

I'd like to use the mobile menu (with toogle and logo) also for tablets. Do you know how to do it?

And the last one... when I open the mobile menu its empty! Why?

Thanks again for all your help!

Kind Regards,

1. Try increasing the height of the menu when it becomes sticky. 20px isn't tall enough to show the logo.

2. This should do it: https://generatepress.com/forums/topic/mobile-header-size-tablet-view/#post-541540

3. Is there a menu set to the "Slideout" theme location?: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

Thanks so so much Tom! With your help I've resolved the first and the third issue! Then only one that it doesn't work as expected is the second one, where no toggle box is shown. Instead of it, the menu is under the logo now.

Is the CSS still added? I'm not seeing it. Are you using GP Premium 1.6.2?

Yes, it is. https://imgur.com/a/KdWu2jW

I'm using 2.0.2 version

Can you try this updated CSS?: https://generatepress.com/forums/topic/mobile-header-size-tablet-view/#post-541540

Yes! It works perfectly!!! Thanks so so much!!!

Awesome, glad I could help :)