Archived topic
Include Menu Items for Mobile when Secondary Menu is Hidden
4 replies · Started by Martin on May 13, 2020
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
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
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
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;
}
}
Glad you found a solution!
