Search form in primary navigation menu not matching same colors (Metro Pro)

[mat3d]

Hello,

This is my first post on this forum so I hope to write in the correct section. I am using the Magazine Pro theme on one website and I recently bought the Metro Pro theme for a new website.

Concerning Metro, in the Theme Settings I selected "Search Form" for the Primary Navigation Extras but the form has a white background color while the navigation menu is dark grey. I selected the same option with the Magazine Pro theme and the search bar matches the menu's colors. Any idea how can I have the same result on Metro too?

Many thanks!

Mat

[Christoph]

Hi Mat,

do you have a link to the website?

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[mat3d]

Hi Christoph, here it is:

http://mirrorlesscomparison.com

[Christoph]

Thank you.

Around line 677 of the style.css you will find .search-form input[type="search"] {

Change
background: #f5f5f5 url(images/search.png) no-repeat 15px 16px;

to
background: #333 url(images/search.png) no-repeat 15px 16px;

You'd probably want to create a few new selectors (right underneath):

This removes the border and the shadow effect around the search box

.search-form input {
    border: none;
    box-shadow: none;
}

This changes the text color of "Search this website..."

nav input[type="search"]::-moz-placeholder {
	color: #fff;
}

nav input[type="search"]::-webkit-input-placeholder {
	color: #fff;
}

nav input[type="search"]:-ms-input-placeholder {
  color: #fff;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[mat3d]

Thanks a lot Christopher! I have two additional questions if you don't mind:

- When I start typing in the search form, the text becomes dark again. Which additional code should I add to have it white?

- The code seems to work on Safari only. I can't see the changes in Chrome or Firefox even after doing a hard refresh. The same things happened yesterday when I was trying to change the style of the blockquote. Any idea why?

Mat

[Christoph]

I don't see any changes to the style.css

Make sure to empty all caches (plugin, hosting, CDN (Cloudflare) )

This should change the color of the "text that is searched for"
.search-form input {
border: none;
box-shadow: none;
color: #fff;
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[mat3d]

The color of the text being search for is now ok.
The form shows correctly in other browsers too.
Thank you again!

[viajeroscallejeros]

It's possible to put the search form in the secondary menu?

My blog: http://www.viajeroscallejeros.com/

Thanks!

[Author]

Posts