[Resolved] Mobile Menu Location

[Daniel]

Currently we have menu locations for slideout menu and primary.
However, I want to have sub menus only showing on mobile only.
can we not have a location added for a mobile only menu?
Or am I missing something?

[Leo]

Hi there,

So you are wanting to hide the submenu items in the slideout menu on desktop?

If so try adding hide-on-desktop in the Custom Classes field of those sub menu items: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Let me know if this is what you are looking for.

[Daniel]

Ok, that worked, but how do I get rid of the dropdown arrow too?

Thanks in advance 🙂

[Leo]

Try this:

@media (max-width: 768px) {
    .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }

    .main-navigation .main-nav ul li.menu-item-has-children > a {
        padding-right: 20px;
    }
}

[Daniel]

Perfect! I wanted to hide it on desktop.

Ok, last thing, for the mobile menu, is there anyway to have all the menu items expanded by default without having to click the burger menu.
I would like to remove the burger menu all together and just have all my mobile menu items (including sub items visible by default), can this be done?

Leo, thanks for the help by the way.

Saved me a lot of head scratching 🙂

[Tom]

Something like this maybe?:

@media (max-width:768px) {
    .menu-toggle {
        display: none !important;
    }

    .main-navigation .main-nav > ul {
        display: block !important;
    }
}

[Jay]

Can that be done with the secondary navigation? What would be the code for that?

@media (max-width:768px) {
.menu-toggle {
display: none !important;
}

.main-navigation .main-nav > ul {
display: block !important;
}
}

[Leo]

Give this a shot:

@media (max-width:768px) {
    .menu-toggle.secondary-menu-toggle {
        display: none !important;
    }

    .secondary-navigation .main-nav > ul {
        display: block !important;
    }
}

[Jay]

That worked! Thanks Leo

[Leo]

No problem!

[Author]

Posts