How to target mobile nav with CSS

trush · February 2020

Can you post the CSS code that controls the colors for the mobile nav menu on magazine header? I want to change the background color, link color, active link and background color. I'm using sticky header with dark style.

Thanks

Pablo · February 2020

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co

thanks

trush · February 2020

https://snipboard.io/lJzWsK.jpg

Pablo · February 2020

Can you send us a link to that website?

We'll create a Custom CSS code for you.

Thanks

trush · February 2020

thebaerlaw.com

Pablo · February 2020

Please paste that CSS code into Theme Options > Custom CSS & JS > CSS

@media (max-width:768px){
	.menu-item a{
		background:gold !important;
		color:red !important;
	}
	
 	.menu-item.current-menu-item a{
		color:blue !important;
	}
}

Thanks

trush · February 2020

thanks!

trush · February 2020

I have another question. How do you make the parent link in the nav on the mobile dropdown the sub menu? Right now you have to click the plus for it to drop down. The link in the menu is set as custom link "#". And how do you target the plus sign with CSS to make bigger or change to a down arrow? https://snipboard.io/m4OZaA.jpg

Thanks!

Pablo · February 2020

Please take a look at this topic:

https://forum.muffingroup.com/betheme/discussion/39360/optimising-dropdowns-mobile#latest

It will surely help you resolve that problem.

thanks

trush · February 2020

Ba Boom!!!! You rock Pablo! TY

Pablo · February 2020

Glad to hear that.

If you have some other questions, feel free to ask.

Thanks

How to target mobile nav with CSS

Comments