[Resolved] Navigation Search Bar Customisation

[Lim Siong Boon]

Hi Tom,

I am having difficulty trying to customise the search field to bring it next to the search icon on the navigation bar.

My navigation search button is at the end of the navigation bar on the far right.
The original behavior when the search button is click is that the whole navigation will turned into a search field.

I have customised the navigation bar height.
Now when I clicked on the search button, a search field will appeared but it is at the far left of the navigation bar.

This is my website, http://www.pic-control.com/

Appreciate if you can advise me if it is possible to make the search bar the same height as me new navigation menu height.

Thank you.

[Tom]

Hi there,

When using Generate Spacing, all of these values are updated automatically.

Without Generate Spacing, you’ll need to match the height of the navigation search with the navigation.

So this should do it:

.navigation-search {
      height: 30px;
}

[Siong Boon Lim]

Hi Tom, I have “Generate Spacing”. How to do it with generate spacing?

[Tom]

It will happen automatically – the search navigation takes on your menu height setting, so you shouldn’t have to do anything at all.

[Siong Boon Lim]

I got it. Erase my CSS configuration and set the height using the “Generate Spacing”.

May I know how do I shift the search bar to the right, next to the cancel cross button.
Currently it is at the far left hand left.
I would like my menu to be remain seen instead of being blocked by the search bar.

Also how do I change the search bar color from dark gray to another color?

Thank you.

[Tom]

You can change the width of the search with this CSS:

.navigation-search {
      max-width: 300px;
}

Change the 300px to whatever you like.

To change the color, you can use this:

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active {
      background-color: #3f3f3f;
      color: #FFF;
}

.navigation-search input[type="search"], .navigation-search input[type="search"]:active {
      background-color: #3f3f3f;
      color: #ffffff;
}

[Siong Boon Lim]

Hi Tom,

Thanks. I managed to get the width correct. The bar shorten to the right which does exactly what I wanted.

The color customisation couldn’t work.
I managed to figure out the following from your example which works for me,

.navigation-search input[type=”search”], .navigation-search input[type=”search”]:focus {
background: #AFA;
color: #FFF;
}

Thank you for your help.

[Tom]

You’re welcome 🙂

[Author]

Posts