Archived topic
Different secondary header on mobile?
5 replies · Started by Marijke on June 13, 2021
Hi again! I'm using the secondary header to display some of my shop categories. However, on mobile, I'd like to add a few more pages that I don't want to display on the desktop secondary header. I suppose make a new menu for the mobile version and use CSS to display this one on mobile? I just don't know how. Any pointers?
Thanks a lot for all the great help.
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Oh duh, sorry! I've included it.
Hi there,
Simplest way is to add the Menu Items to your Secondary Menu, and then we can use some CSS classes to hide them on Desktop.
To hide a menu item on desktop:
1. in Appearance > Menus, edit your menu and then enable the CSS Classes option - see here:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
2. Then in the CSS Classes field add: hide-on-desktop
GP has the hide-on-* classes built in:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes
Huh, I knew about the hide-on classes but it didn't even occur to me to use them here. Thanks, that's exactly what I needed.
Hi Marijke,
The topic is marked as resolved, have you figured it out?
Let me know :)
