[Resolved] Mobile menu code

[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 "";
} ?>

[David]

Hi there,

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

[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.

[fredparson]

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

[David]

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

[fredparson]

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

[Fernando]

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. 🙂

[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;
}

[Fernando]

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

[Author]

Posts