[Resolved] Desktop menu when on mobile

[Eric]

Dear sir/madam,

For a landing page we needed to have a different menu, so I used the menu swapper plugin to achieve that. As you can see here we have only one main element and various subelements: http://eliv.com.tw/volunteernow/

When on mobile I would like to have either the same view as on desktop, or I would like to have the whole list open right away when you click on the menu button (but would prefer the first option). Any help is much appreciated.

Best regards,

Florian

[Leo]

Hi Florian,

Not sure what you mean by having the same view? Like basically show the menu item without the menu toggle?
If so you can try adding the link straight to the mobile header: https://docs.generatepress.com/article/mobile-header/#adding-html-inside-the-mobile-header

If you want the whole list to open right away then try making a new menu and set to slideout menu in theme location:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#setting-a-theme-location

Let me know if helps.

[Tom]

You could try something like this: https://generatepress.com/forums/topic/full-menu-topics-in-mobile-view/#post-219222

That should show all of your menu items on mobile without the need for the mobile menu.

[Eric]

Thank you,

Tom, your solution worked!

Only thing question I have left is, how can I make the menu float right and not on the left? I replaced all code that says left to right, but there is no effect yet (see eliv.com.tw/volunteernow):

@media (max-width: 769px) {
.menu-toggle,
.main-navigation.toggled .main-nav > ul {
display: none !important;
}
.main-navigation ul,
.main-navigation ul li:hover > ul,
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul {
display: block;
}
.main-nav .sf-menu > li {
float: right;
clear: none;
}
.nav-aligned-center.nav-below-header .main-navigation .menu > li,
.nav-aligned-center.nav-below-header .main-navigation .sf-menu > li {
display: inline-block;
}
.main-navigation .main-nav ul ul {
display: none;
float: right;
position: absolute;
top: auto;
left: 0;
z-index: 99999;
width:200px;
text-align:right;
}
.main-navigation .main-nav ul ul ul {
right: 100%;
top: 0;
}
.mobile-bar-items {
display: none;
}
}

[Eric]

Oh, I’m sorry it was very simple… Just added !important and it worked

Thanks!

[Tom]

Glad you got it working! 🙂

[Author]

Posts