Change the color of the mobile Menu/Search bar

jennyludmer · Member · Sep 22, 2015 at 2:17 pm
Copy link

Add topic to favorites
Hello. I’m using the Expound theme with the mobile option activated. I’ve tinkered and gotten all of the colors the way I want them EXCEPT for the Menu/Search bar that only appears in the mobile version. Does anyone know the CSS code to change it’s colors?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Sep 23, 2015 at 8:24 am
Copy link
Hi there, although this is up to you, Expound is a Responsive theme that adjusts to for all screen sizes form the largest desktop monitor all the way down to phones and gives a consistent look to your site, no matter what device or screen size on which your visitors view your site, so the Mobile theme really isn’t necessary with Expound.

That said, this CSS will allow you to set the color on the dedicated mobile search and menu.
```
.mobile-theme .search-form #s {
    background: #006d9d;
}
.mobile-theme .menu-search {
    background: #1e8cbe;
}
```
jennyludmer · Member · Sep 24, 2015 at 7:18 pm
Copy link
Perfect – that worked! FYI, the reason I am using mobile mode is that the header image won’t scale otherwise (ie, on a phone you just see the middle inch of the image). Is there a setting I need to tweak to fix that so I can skip mobile mode?
thesacredpath · Member · Sep 24, 2015 at 8:36 pm
Copy link
Hmmm, I can get the image to resize, but on small tablets and on phones, it becomes pretty hard to read since it gets so small. There is also a large whitespace that appears beneath the header image when we do that and that would require a number of media queries to adjust for smaller devices/screens.

No items found.