[Resolved] Latest update is screwing up my menu when it goes responsive

[Pete]

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;}	
	
}

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pete]

The whole menu disappears with the new css when it responsifies

[Pete]

Got it back but the new css doesn’t do what my last css did… stops it responsifying

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pete]

I’ve just deleted it and replaced it with your new css. The old one was losing all the menu css under 769

[Tom]

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).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pete]

ok take a look now with the old css

[Tom]

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; 
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pete]

Thanks Tom all working now. Cheers. Oh it’s going to be 103 F here tomorrow 😉

[Tom]

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! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts