[Resolved] Mobile Menu Vs Primary Menu for desktop version of the page

[HT]

I have seen the website is rendering the Mobile and Primary menu for the desktop version of the page at the same point in time.

Is there any possibility of only one Menu item based on the device from where the webpage is being loaded? rather than loading two menu items?

<button class="menu-toggle" aria-controls="mobile-menu" aria-expanded="false">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">

[Elvin]

Hi there,

You’re having 2 menus because GP Premium renders a separate menu on mobile when you have “Mobile Header” set to enabled.

You can disable Mobile header to have a single menu for both mobile and desktop but some functionalities that the Mobile header option brings will not be available.

[HT]

Thank you for the reply.

Can we enable only the mobile menu ONLY when the page is rendered from mobile devices?

I think this kind of feature makes sense for more modular themes GeneratePress! Isn’t it?

[Elvin]

Can we enable only the mobile menu ONLY when the page is rendered from mobile devices?

That would be nice to have. But the problem is, PHP runs server-side and WordPress core functions don’t exactly have the proper conditions for mobile viewport conditions.

wp_is_mobile() isn’t exactly reliable for this.

While some would propose remove() script, this isn’t exactly the best solution either because that means you’ll have to wait for it to load on the DOM to remove it.

[HT]

So there is no option at the moment. Is there any CSS options?

[Elvin]

The CSS is actually applied.

CSS hides the “mobile-header” element on desktop and shows it on mobile. It also shows the .site-header, #site-navigation, and #sticky-navigation on desktop but hides them on mobile.

It’s basically switching what shows up between the 2 menus depending on the viewport.

It doesn’t completely remove them from the DOM structure depending on the viewport though. CSS can only hides/shows things using depending on viewport using @media rules. It can’t modify/remove/add any rendered HTML tags.

[Author]

Posts