Changing the menu and search bar background colours in mobile version

tybowmaker · Member · Jun 13, 2014 at 6:50 pm
Copy link

Add topic to favorites
I have managed to change the background colour of the menu bar on my mobile site only using this code in my custom CSS:
```
.mobile-theme .menu-search {
	background: #FF0000;
	-webkit-box-shadow: inset 0 -1px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.4);
	-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.4);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.4);
}
```
But the search bar remains blue. I can’t seem to find the right element to target when I view the mobile source code. Any suggestions on how to change the search area background to red?

Thanks for your time!

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Jun 16, 2014 at 2:43 pm
Copy link
To change the search field color in the mobile theme, add this to your Appearance > Customize > CSS editor:
```
.mobile-theme .search-form #s {
    background: #9D0000;
    border: 1px solid #7F0000;
}
```
To find it, I used the emulation tab in Chrome. Here is a guide: http://stackoverflow.com/questions/19496393/overrides-page-in-chrome-developer-tools-gone-in-latest-canary (make sure to refresh after the switch)

And then I right-clicked on the search field and selected “Inspect Element” to see the developer tools HTML and Styles panels as you would normally. Here is a guide about viewing CSS within browser tools: http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

Here is an example showing how I found and also tested the CSS using Chrome’s browser tools: https://cloudup.com/cQmBRpBX9aS

I can see where you’re going with the http://captyvate.com/ mobile view, and I think it looks great!

No items found.