[Resolved] Changing CSS for Mobile Menu

[Stacey]

I am needing my menu to change to a mobile menu at a wider width to accommodate tablets. I have found the CSS to change the breakpoint, but I don’t know where to put it. Also, is there a way I can set it so that it is not overwritten when the theme is updated?

@media (max-width: 768px) {
	.main-navigation .menu-toggle,
	.main-navigation .mobile-bar-items,
	.sidebar-nav-mobile:not(#sticky-placeholder) {
		display: block;
	}

	.main-navigation ul,
	.gen-sidebar-nav {
		display: none;
	}

	[class*="nav-float-"] .site-header .inside-header > * {
		float: none;
		clear: both;
	}
}

[David]

Hi Stacey,

you can add it to the Customiser > Additional CSS. This won’t be overwritten on update.

[Stacey]

Wow! I was making that a lot harder than it needed to be! Thank you for your help and direction!

[David]

You’re welcome Stacey.
The alternative is a Child Theme Style sheet, but only go their if you have a lot of changes to make.
I would recommend you check out Tom’s Simple CSS plugin it has its own box in the Customiser looks the same as Additional CSS. One of the added advantages it gives you a Simple CSS meta box in the Post editor, so you can limit the CSS to just that page.

[Author]

Posts