[Resolved] Using wp_is_mobile and larger tablets

[Mat]

Hello

Followed this guide and all is working fine. Is there a way to tinker with this so that the full menu shows when there is room, such as on larger tablets? I get that wp_is_mobile is sniffing for User Agent so this might not be simple.

Putting this another way – the snippet and menu I point it at work great on phone and portrait tablet but, when tablet is larger and/or landscape, I’d ideally like the full ‘standard’ menu to show as there is more than enough room for it. Thanks.

[David]

Hi there,

thats correct wp_is_mobile() uses User Agent Sniffing, which is a terrible thing lol.
And i am 99% sure that you can’t sniff the device orientation or browser viewport size / ratio. That requires Javascript.

My personal view using wp_is_mobile with the Nav element, is really risky.
Even if the function could determine what orientation the device is, it only does that on load, so its not responsive eg. user rotates devices or resizes the desktop browser width.
Theres also a risk that server side page caching could serve up a cached nav for the incorrect device.

Might want to consider a pure CSS method ?

[Mat]

Thanks David

Was almost resigned to telling myself I was happy with having the phone menu on tablet until you went and ruined my day with the cache comment! A very good point.

Any handy bookmarks around the place? Does this boil down to a dedicated menu for mobile that is hand tooled in custom CSS, a Hook Element …? The mobile menu I’m using is just SVG items with the code inside ‘Navigation Label’, that’s it, no text labels.

Any pointers (lazy helpers) more than welcome. Cheers.

[David]

Can i see what you have for the current solution ( before i ruined the day lol ) ?

[Mat]

Of course – not a lot to see there for now, development site, will drop password in private section.
As I said, 2 menus, mobile menu breakpoint zero, PHP snippet linked to in first post. Thanks.

[David]

I am assuming through my tests that the Links for mobile are the same as they are for desktop.
If so, a simple solution would be:

1. Use just a Single Menu for both desktop and mobile.
2. Remove the Text from the Menu on smaller screens using this CSS:

@media(max-width: 710px) {
    .main-navigation li span,
    .main-navigation li.remove-at-710 {
        display: none;
    }
}

I estimated it is around 710px where the menu starts to crash into the logo.

3. Any menu items you wish to remove from the menu at that same breakpoint you can give a CSS Class of: remove-at-710

See here for how to add classes to menu items:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[Mat]

Apologies for late reply, and thanks for taking a look.

Using the above, though – items are still inside hamburger, how do I remove hamburger completely and just have the non-hidden menu items on full show?

[Mat]

And, as all lazy people eventually do, answering my own question … presumably leaving ‘Mobile Menu Breakpoint’ at zero?

[David]

That would do it 🙂

[Mat]

Lovely, thanks.

[David]

You’re welcome

[Author]

Posts