[Resolved] Mobile menu break point and header merge

[Colin]

Hi,

I set my mobile menu breakpoint to 1100 via Customizer>Header>mobile breakpoint.

On pages where I use Elements and have the header set to “merge on desktop only”, the mobile header seems to merge with the header between (I think..?) 768 – 1100.

So, if I view these pages on an ipad in portrait mode the mobile menu does not merge with the header, which is what I want. But if I view it in landscape mode the header does merge with the header, which I don’t want. You can see this on any of my ‘Services’ pages, About, or Contact.

Is there a way around this, or did I miss something?

Thank you!

[Leo]

Hi there,

Not quite sure if I understand.

I checked every page in the primary menu and don’t see a header element added.

Can you double check?

Let me know 🙂

[Colin]

Hi Leo,

Sorry, its entirely possible my wording isn’t accurate. I took a few screenshots to better explain.

Example #1 is how I want my mobile menu to look on all my ‘Services’, About, and Contact pages up to 1100 pixel width. The top pictures are separate from and not ‘merged’ with the mobile menu.

In example #2 and #3 those pictures are merged. They are underneath the mobile menu and that is what I do not want.

After 1100px, when it reverts to the desktop menu, I do want the top pictures and the menu to merge.

Thanks 🙂

[Tom]

Ah, that option is for the mobile menu, but the option in the Header Element is for the mobile breakpoint (which may differ from the mobile menu breakpoint).

You can adjust it with this filter:

add_filter( 'generate_not_mobile_media_query', function() {
    return '(min-width: 1101px)';
} );

Let me know 🙂

[Colin]

Hmm.. is this right? I didn’t publish

[Tom]

Ah, sorry – it should be added using one of these methods: https://docs.generatepress.com/article/adding-php/

[Colin]

Yes that worked! Thanks so much!! 🙂

[Tom]

Awesome, glad I could help 🙂

[George]

Hello. Sorry for barging in here! I tried this code to change the header element mobile breakpoint but it’s not working. Is the code still valid? Looking to activate header element mobile breakpoint earlier than 768px.

[Tom]

Hey George,

The generate_not_mobile_media_query applies to desktop CSS only – not mobile.

You can change the mobile media query, but it will change it throughout the plugin where it’s active:

add_filter( 'generate_media_queries', function( $queries ) {
    $queries['mobile'] = '(max-width:768px)';

    return $queries;
} );

[George]

Yeah, this last code worked for me, Tom! I decided to go with a media query instead, though, since I had a few other sizes to tidy up.

Thank you!

[Tom]

No problem 🙂

[Author]

Posts