- This topic has 5 replies, 3 voices, and was last updated 3 years, 10 months ago by
.
-
Posts
-
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
ContentThanks
Customer Support
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
Customer Support
Try this:
.wp-block-navigation__responsive-container-open:after { content: "text"; }Thanks Leo. It’s working now.
No problem 🙂
- You must be logged in to reply to this topic.
