[Resolved] Include Menu Items for Mobile when Secondary Menu is Hidden

[Martin]

Hi there.
I have created my main menu and a secondary menu which includes the Lightweight Social Icons and a couple of menu items. In order to hide the secondary menu on mobile I have added CSS to do that. However, the link that is in the secondary menu and the social icons are still needed to appear somewhere.

I was thinking of adding them to the main menu to appear for mobile only. Is this feasible or is there another way that is better?

Thank you.

Martin

[Leo]

Hi there,

Since you are using the off canvas panel on mobile, you can create a new menu which includes all the menu items from primary and secondary and assign it to the off canvas panel.

Then use the widget area to insert the social icons:
https://docs.generatepress.com/article/off-canvas-panel-overview/#off-canvas-panel-widget-area

[Martin]

I tried that but I want the main menu in the Off Canvas menu and would rather like to avoid having two menus to manage.

Obviously if there’s no alternative I will have to do so but ideally I would like to simply append the extra few items to the main menu on mobile (off canvas) only.

Thanks.

Martin

[Martin]

Found a solution:

/* Hide element on Desktop */

@media only screen and (min-width: 981px) {
.hide-on-desktop {
display: none !important;
}
}

/* Hide element on Tablet/Phone */

@media only screen and (max-width: 980px) {
.hide-on-mobile-tablet {
display: none !important;
}
}

[Leo]

Glad you found a solution!

[Author]

Posts