Site logo

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

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

Home Forums Support Mobile Menu Vs Primary Menu for desktop version of the page

  • This topic has 5 replies, 2 voices, and was last updated 5 years ago by Elvin.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1799596
    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">
    #1799606
    Elvin
    Staff
    Customer Support

    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.

    #1799623
    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?

    #1799639
    Elvin
    Staff
    Customer Support

    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.

    #1799658
    HT

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

    #1799875
    Elvin
    Staff
    Customer Support

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.