[Resolved] Mobile menu code

Home Forums Support [Resolved] Mobile menu code

Home Forums Support Mobile menu code

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2187427
    fredparson

    Hi I’m looking for the mobile menu code could you please help.

    Implementing the code from this website just need to echo out the mobile menu dropdown.

    https://wisdmlabs.com/blog/4-easy-steps-to-adding-a-mobile-menu-on-your-wordpress-website/

    <?php
    /* The below code checks if a mobile-menu is set from the backend in the menu settings. If a menu has been set it will be displayed in the header. Or else, a menu has not been set then display a message.*/
    if ( function_exists('has_nav_menu') && has_nav_menu('mobile-menu') ) {
          echo "";
    } ?>
    #2187435
    David
    Staff
    Customer Support

    Hi there,

    why not use the Mobile Menu built into GP ? What am i missing 🙂

    #2187438
    fredparson

    The drop down menu looks fine in mobile but is spread out on a desktop website browser. I would like them to look pretty much the same. so two menu’s. Canvas doesn’t offer a drop down menu. So if I could get the code for menu by name that would be great.

    #2187454
    fredparson

    Or a way to remove the top level of submenu from mobile and just display the second categories.

    #2187482
    David
    Staff
    Customer Support

    Can i see the site so i can get a better understanding of the changes

    #2188102
    fredparson

    Sorry site isn’t live at the moment. Here are the menu’s though.

    Firefox browser menu

    Mobile menu

    #2188153
    Fernando
    Customer Support

    Hi Fred,

    If you’re wanting to make the Nav identical for Desktop and mobile more or less, wouldn’t setting the Mobile menu breakpoint to either 2000 or 0 work? This can be found in Appearance > Customize > Layout > Primary Navigation: https://share.getcloudapp.com/lluEgKLG

    If you’re referring to something else, may you kindly take a larger screenshot of both? Kindly try including the entire header.

    Hope to hear from you soon. 🙂

    #2188515
    fredparson

    Found a work around. This opens the mobile menu so you don’t have to click twice, and hides the extra menu item in mobile menu.

    .main-navigation.toggled .main-nav ul ul.sub-menu {
            position: relative;
            top: 0;
            left: auto!important;
            right: auto!important;
            width: 100%;
            pointer-events: auto;
            height: auto;
            opacity: 1;
            display: block;
            visibility: visible;
    }
    
    .main-navigation.toggled .main-nav li:last-child > a {
    		display:none;
    }
    #2189217
    Fernando
    Customer Support

    Glad you found a workaround! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

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