Header – Avoid breakpoint on small screens

[Thomas]

Hi!

A hopefully quick question:
https://docs.generatepress.com/article/mobile-header/

My page dosn’t have any navigation.

I want to keep the logo at the left side on all screen sizes like here:
https://docs.generatepress.com/wp-content/uploads/2019/03/1.8_MobileHeader.png

But I can’t find the option “mobile header” anywhere in current
Generatepress Pro 1.10.0.
Menu Plus is enabled.
I sent a screenshot of my customizer via email to support@generateblocks.com.

Then I tried to set the mobile breakpoint to less than 768px but this
doesn’t work either.

Regards
Thomas

[Leo]

Hi there,

That’s strange. The option should definitely be there.

I’m not seeing a screenshot in our inbox.

Can you upload one using this service?
https://postimages.org/

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

[Thomas]

Sure. I double checked the settings and can’t find the issue.

https://postimg.cc/Mf1Vmpbx
https://postimg.cc/nsQzDw1f

Thank you!

[David]

Hi there,

in Customizer > Layout > Header – its below the padding options:

Kopfbereich ( Mobiles Gerat )

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

[Thomas]

Thanks. But Aus means Off. This Setting is already off.
I switched from my child theme to Generatepress so there is no custom code involved. The only plugin left is GenerateBlocks. Still nothing.

Switching generate_menu_plus_settings[mobile_header_branding] to text or even a custom image does not affect the page either. Even the sticky menu option does not do anything. I can’t find any errors in console or anything.

[Leo]

Sorry I thought you actually wanted the mobile header layout to keep the logo on the left side all the time?

Can you try turning it on?

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

[Thomas]

Now I found out that all the settings in Layout>Header named Mobile Header, Branding Type and Sticky do only work when the hamburger menu is visible. This section should not be called the Mobile Header as it does not make anything mobile. It should be called the Header with the Hamburger.

But in my case I do not have a main navigation. Is there any option to align the brand left on all screen sizes as I already have another brand on the right side?

[Leo]

No – the mobile header option specifically changes the header layout on mobile as seen here:
https://docs.generatepress.com/article/mobile-header/

Can you activate it for me to take a look?

Might need some tweak with CSS if you are not using the menu.

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

[Thomas]

Now I know I asked the wrong question. My issue: The logo should stay on the left side even on screen width below 768px. I do not want the hamburger. Is this possible?

These very confusing options could be sorted like everything else in Generatepress: Every setting might become adjustable for small, medium and large screens. The hamburger should be usable in every screen size. Same with logo position and sticky header. All those options are independent design choices.

The hamburger does not make anything “mobile” so the names and menu order seem to be misleading.

[David]

What value have you in the Customizer > Layout > Primary Navigation –> Mobile Menu Breakpoint ?

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

[Thomas]

These are still the screenshots:
https://postimg.cc/Mf1Vmpbx
https://postimg.cc/nsQzDw1f

I tried different values but now have 0.

[David]

Your Primary Navigation Location is set to No Location – change this to After Header.
Then we can discuss where and what type of navigation your want for Desktop and Mobile

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

[Thomas]

Done: https://postimg.cc/QBmmQh0y

> Then we can discuss where and what type of navigation your want for Desktop and Mobile

None please 😀
Just the logo left aligned.

[David]

ooh… i thought the issue was that your Menu wasn’t displaying lol
Add this CSS to your site to keep the logo aligned left:

.site-header {
    text-align: left !important;
}

Then you can remove your navigation again 🙂

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

[Thomas]

Thanks for your patience. I thought I had to learn a secret about Generatepress. But this part is simply a bit chaotic. Hopefully this will be fixed with full page editing functionality?

This is what I did now:

.inside-header {
padding: 8px 0 !important;
}
.header-widget {
margin-bottom: 0 !important;
}
.site-header {
text-align: left !important;
}

[Author]

Posts