[Resolved] How to display third navigation menu as toggle button in mobile

[Chris]

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

[Ying]

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/

[Chris]

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

[Leo]

Try this:

.wp-block-navigation__responsive-container-open:after {
    content: "text";
}

[Chris]

Thanks Leo. It’s working now.

[Leo]

No problem 🙂

[Author]

Posts