Header element disappears on Mobile Menu Breakpoint

[George]

I have two headers, one only showing on the front page and the other one on the entire site apart from the front page. The front page header works fine on all screens. The other header though is hidden as soon as the Mobile Menu Breakpoint hits. I have modified all header paddings, etc, I cannot see what is going on.

On the URL submitted, try viewing any page apart from the homepage, you will see the issue. Once the mobile breakpoint hits, the whole page shifts upwards. I tried removing all custom CSS, it didn’t fix the issue. I am hoping it’s a silly thing that I have overlooked!

[Leo]

Hi there,

Any chance you can activate the parent theme for me to have a deeper look?

Also just to confirm, you’ve changed this setting to 1255px?

Let me know 🙂

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

[George]

Parent them activated, still same issue. Yeah, Mobile Menu Breakpoint is set to 1255px but it doesn’t make any difference.

[Leo]

Ok I believe that’s a bug.

Can you try setting the breakpoint back to 768px and see if that solved the problem?

Thanks 🙂

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

[George]

Same issue. It only works only when I remove the number completely (which I have done for you to check). It’s weird, I pretty sure I would have noticed that with previous sites. It’s a big one.

[Leo]

I’ll do some digging and get back to you 🙂

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

[Leo]

Sorry I just noticed something. Why is the merged header element needed here?

Doesn’t look like you are going for the merged appearance? The top bar and primary navigation both have solid colors.

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

[George]

Yes, you are right, it must have stayed there from messing about. I changed that, still the same problem.

[Leo]

Getting better.

Can you now set the breakpoint to 768px? Currently the mobile toggle isn’t kicking in.

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

[George]

Ok, I did. Same issue. I can send you credentials to have a look if you want.

[Leo]

Ahh I think I got it.

Did you add site-header as a custom class in the header element? Can you remove that or rename it to something else if it’s actually needed?

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

[George]

Yes, that was it!!! Why is that a reserved class or something?

[Leo]

Yup it’s used for the default site header 😉
https://www.screencast.com/t/DjsySV7D9

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

[George]

I see. I still think you need to let Tom know cause there is no way people would know about it. Maybe prevent users from setting that class?

[Leo]

There is no way to stop people from using any of classes.

It hasn’t happened before so it’s not really an issue for now 🙂

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

[Author]

Posts