Mobile version: color change menu/search bar

theworldofmotocross · Member · May 12, 2016 at 11:20 am
Copy link

Add topic to favorites
Hi all,

I need help with a CSS code, it is about a color change of the menu/search bar with mobile version. I found an answer of the topic about change the color of the mobile menu/search bar: https://en.forums.wordpress.com/topic/change-the-color-of-the-mobile-menusearch-bar?replies=4

But on my website appears a little bit blue around the menu/search bar and also a divide between menu and search. How can I change this in the same color in CSS?

And does anyone know how can I change with a CSS the color of links (when the menu bar drops out and below in the content) in the mobile version in the following web color: #801818?

Thank you very much for help!

Greetings,
Laura

The blog I need help with is: (visible only to logged in users)
theworldofmotocross · Member · May 12, 2016 at 12:05 pm
Copy link
The domain is changing – maybe you will find the address now under following URL: http://www.moeckliag.ch
thesacredpath · Member · May 12, 2016 at 8:12 pm
Copy link
Hi @moeckliag, with Lovecraft being a responsive design, you really don’t need to us the Mobile Theme. Lovecraft will automatically adjust for all devices/screens/window widths. It could be, though, that you are using the mobile theme for a reason. Have you tried disabling the Mobile Theme at Appearance Mobile and looking at your site on your phone?

I see you have the color set to #801818 on the menu/search bar. To change the color of the links in the menu on the Mobile theme, add the following to your custom CSS.
```
.mobile-theme #access a {
	color: #801818;
}
```
For the blue on the bottom edge of the menu in the Mobile theme, it is a box shadow that was set. Add the following to take that away.
```
.mobile-theme .menu-search {
background: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
```
theworldofmotocross · Member · May 13, 2016 at 2:29 pm
Copy link
Thank you very much for your help it works!

Is there a little CSS code to change the line color of the blue line between menu and search bar in the mobile version?
thesacredpath · Member · May 13, 2016 at 8:26 pm
Copy link
To change the left border color on the search section, add
border-color: #fff;
to your
.mobile-theme .search-form #s
CSS rule and edit the color as desired.
theworldofmotocross · Member · May 14, 2016 at 5:48 am
Copy link
Thank you very much for your great support!
thesacredpath · Member · May 14, 2016 at 6:56 am
Copy link
You are welcome. :)

No items found.