Archived topic
Latest update is screwing up my menu when it goes responsive
10 replies · Started by Pete on January 25, 2017
Hi Tom, I have the following css to stop the menu going responsive, but since the latest update it has lost all it's css when it narrows to ?768px
https://perthreliefteachers.com.au
/*******************/
/* .navigation - responsive*/
/*******************/
@media (max-width: 769px) {
.menu-toggle,
.main-navigation.toggled .main-nav > ul {
display: none !important;
}
#menu-top.secondary-menu.sf-menu {
display: inline !important;
}
.main-navigation ul,
.main-navigation ul li:hover > ul,
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul {
display: block;
}
.main-nav .sf-menu > li {
float: left;
clear: none;
}
.nav-aligned-center.nav-below-header .main-navigation .menu > li,
.nav-aligned-center.nav-below-header .main-navigation .sf-menu > li {
display: inline-block;
}
.main-navigation .main-nav ul ul {
display: none;
float: left;
position: absolute;
top: auto;
left: 0;
z-index: 99999;
width:200px;
text-align:left;
}
.main-navigation .main-nav ul ul ul {
left: 100%;
top: 0;
}
.mobile-bar-items {
display: none;
}
#secondary-navigation #menu-top.secondary-menu.sf-menu li {text-align:center;}
}The new version simplified the CSS needed to do this.
You can find the update CSS here: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width
The whole menu disappears with the new css when it responsifies
Got it back but the new css doesn't do what my last css did... stops it responsifying
Ah you don't want the mobile menu at all.
Where are you adding the CSS you initially posted? I'm not seeing it anywhere.
I've just deleted it and replaced it with your new css. The old one was losing all the menu css under 769
I misunderstood - the CSS I linked to will initiate the mobile menu at a higher width than 768px. You're trying to ditch the mobile menu all together.
In that case, the CSS you initially posted should work, but I'd have to see it re-added to the site (with caching/autoptimize turned off).
ok take a look now with the old css
In your CSS, you have:
.nav-aligned-center.nav-below-header .main-navigation .menu > li,
.nav-aligned-center.nav-below-header .main-navigation .sf-menu > li {
display: inline-block;
}Replace it with:
.nav-aligned-center.nav-below-header .main-navigation .menu > li,
.nav-aligned-center.nav-below-header .main-navigation .sf-menu > li {
display: inline-block !imprtant;
}Thanks Tom all working now. Cheers. Oh it's going to be 103 F here tomorrow ;)
I'm as Canadian as it gets - give me ice, skates and a hockey stick over that kind of heat any day. My wife on the other hand...
Glad it worked! :)
