How do I change the color of my mobile theme?

And when I say the colour of the theme, I’m talking about the blue bar at the top f the screen with the drop down menu and also the search bar.

I’m a complete novice by the way.

Thank you.

You can follow the instructions here to customize the look of the Mobile Theme:
https://jetpack.com/2013/06/27/customize-mobile-theme/

Hi Jeremy,

No I’m sorry I was trying this route for hours yesterday. I managed to change the color of the text but I couldn’t work out how to change the color of the navigation. I was typing .nav but wasn’t really sure what to type after that.

I have absolutely no experience of coding.

Thanks,

Jamie

Maybe if you could tell me what the name of that blue area is? Is it the meta? or the nav? or the header? I just want to turn that area brown on the mobile theme and have my logo instead of a written title. Nothing fancy.

The site is https://www.coffeebreakfiction.com

Maybe if you could tell me what the name of that blue area is?

It’s .menu-search. You can find that thanks to your browser inspector, as explained in this post.

Something like this, for example, would change all colors to brown, everywhere in the mobile theme:

.mobile-theme .menu-search,
.mobile-theme .search-form #s {
	background-color: brown;
	box-shadow: none;
	border-color: brown;
}

.mobile-theme a,
#site-generator a {
	color: brown;
}

That worked perfectly thank you.

I am having the same issue. I tried copying and pasting this exact code into my custom CSS and it did nothing. Is that not the correct spot?

The default colors aren’t bad except the text of the menu choices are very faint and you can barely see them. That’s all I want to change really.

I tried copying and pasting this exact code into my custom CSS and it did nothing. Is that not the correct spot?

Could you make sure the Mobile Compatible option is enabled, like so:
https://i.wpne.ws/htZ4

If that doesn’t seem to help, could you post your site URL here so I can have a look?

If you want it to remain private, you can also contact us via this contact form:
https://jetpack.com/contact-support/

Thanks!