Archived topic
Change second navigation menu to mobile when starts to stack
9 replies · Started by William on July 3, 2020
Hi there,
Is there a way to make the second nav on the site go straight to mobile version when the menu starts to stack, such as the example below (example link of page in question here)
Also, for the second navigation menu, is there a way to have the menu options that have two words stacked (so ontop of each other) to reduce the width size?
Many thanks as always
Hi there,
Just to confirm, are you using 0px as the mobile navigation breakpoint currently?
https://docs.generatepress.com/article/mobile-navigation/
Hi there,
The menu in question is the secondary navigation menu, so no unfortunately.
Yes I know but your primary navigation is also not changing to toggle.
Just wondering if that's intended?
That's intended :) Primary navigation only has two links and I want them to always show regardless of width of device. All the points above are for the secondary nav menu
Can you link me to a page where I can see the secondary nav?
Yes here
So there's two points:
1) when there is two words, to have it stacked to reduce the width
2) to change the point that it changes to mobile so the menu doesn't double up and stack
Hi there,
try this:
@media (max-width: 1300px) {
.secondary-navigation .menu-toggle,
.secondary-navigation .mobile-bar-items,
.sidebar-nav-mobile:not(#sticky-placeholder) {
display: block;
}
.secondary-navigation ul,
.gen-sidebar-nav {
display: none;
}
[class*=”nav-float-“] .site-header .inside-header>* {
float: none;
clear: both;
}
}That's great thank you!
You're welcome
