Archived topic
How to display third navigation menu as toggle button in mobile
5 replies · Started by Chris on May 11, 2022
I want to display 2 navigation menus in desktop and 3 in mobile.
I have added third navigation menu using this following doc.
https://generatepress.com/forums/topic/add-third-navigation-menu-gpp-1-8/
I wanted to display this menu in mobile only so I added this CSS.
@media (min-width: 768px) {
.third-navigation{
display: none !important;
}
}
1.In mobile it is displaying full menu instead of showing toggle button (3 lines). How can I display toggle button for third navigation?
2. Also In mobile i want to display 3 menu toggles side by side instead of as stacked. How can I do that?
I want to display like this.
Header
Menu_1 Menu_2 Menu_3
Content
Thanks
Hi Chris,
Actually you won't need to use any PHP snippet anymore, as WP now has a navigation block which can be inserted in a block element:
For more info: https://make.wordpress.org/core/2022/01/07/the-new-navigation-block/
Thanks Ying. I was able to add navigation block in after_header hook. Now it's showing the third menu navigation with toggle button in mobile. I added class third-navigation as additional class for the navigation block.
How can I add menu label? I added this css but menu label is not displaying it.
@media (max-width: 768px) {
/* CSS in here for mobile only */ .third-navigation a:after {
content: 'Cities';
display: inline;
}
}
Your help is very much appreciated.
Thanks
Try this:
.wp-block-navigation__responsive-container-open:after {
content: "text";
}Thanks Leo. It's working now.
No problem :)
