[Resolved] Header Padding – No Mobile toggle under Layout / Header

[Shawn]

I have been trying to figure this out for over an hour, hoping someone can make sense of this?

Why is there no mobile toggle like in this tutorial?

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

Am I missing something? just trying to make the mobile header larger / mobile logo larger, cannot get it to adjust under Layout or in my Header Element.

Thank you

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi Shawn,

Sorry about that!

The mobile toggle for header padding feature will be available in the next version of GP Premium which is currently available for Alpha testing:
https://generatepress.com/gp-premium-1-8/

I edited that article a few days ago trying to prepare for the official release but accidentally published the new version.

That option won’t work if you are using the mobile header feature though.

Try changing the menu item height with the mobile toggle instead:
https://docs.generatepress.com/article/menu-item-height-width/

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shawn]

Thank you, that helped a lot. I ended up going to Alpha and there are some great new features.

One more question – I am getting confused between Element control of Header and Header settings in Layout. Does one take priority over another? For example, how do I set it to remove the menu all together, if I did not want a menu to show in mobile or desktop.

Thanks again!

[Leo]

The header settings in the customizer are for the global header.

The header element is what we usually call a page hero and it’s usually a bit different from page to page:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/page-hero-examples/

If you want to remove the menu globally, then the customizer option should do:
https://docs.generatepress.com/article/navigation-location/

For your specific case, you will also need to disable the mobile header:
https://docs.generatepress.com/article/mobile-header/

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shawn]

Thank you, that info helps, for the menu, I did that change but menu still shows. I must be missing something else?

http://bethmft.com

Thanks again, as you can tell I am new to GeneratePress, was using The7 previously and moving all my sites to your theme/plugin.

[Leo]

Are you talking about on mobile?

You see the second-last paragraph here:
https://generatepress.com/forums/topic/header-padding-no-mobile-toggle-under-layout-header/#post-850618

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shawn]

Hi yes I did select “No Navigation” in Navigation Location under Primary Navigation

But it still shows

[Leo]

What about this part?

For your specific case, you will also need to disable the mobile header:
https://docs.generatepress.com/article/mobile-header/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shawn]

Sorry did not realize that was required, OK I did that and now it shows this:

http://bethmft.com

Tried other settings but cannot get it to left and resized

I like to think I am smart, I have been working with WP and themes etc. for years, but something about GP i cannot wrap my head around it…..OK maybe I am not as smart as I think.

[Leo]

What’s the issue?

I don’t see the navigation on both desktop and mobile so the options are doing what they are suppose to do?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shawn]

Are you seeing the huge logo in the top center on mobile? overlapping all the content?

The issue is that I cannot move or shrink that, have tried all the settings.

Unless there is just no option to do what I want, I am thinking I just bring the menu back and use page links inside menu if I stick with single page website.

All good I will close this for now, thank you for the help.

[Leo]

The logo width is set at 150px on in the customizer:
https://docs.generatepress.com/article/adding-header-logo/

You can change it for mobile with this CSS:

@media (max-width: 768px) {
    .site-header .header-image {
        width: 50px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Shawn]

Thank you for the help, just a few more if you don’t mind:

– I am unable to color the background of sticky navigation separate from the primary navigation, can you let me know how to do that?

– is there anyway to create a mobile menu that opens like this? is just 200px wide lets say from left edge of screen? is this the off screen option?

– is there anyway to split a menu on both side of a logo, ie half menu items on left side and half on right side with logo in middle?

Thanks again, I am getting used to the interface just need a few last pointers and I am good to go

[Leo]

Please open new topic(s) for the separate questions.

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts