[Resolved] Styling the Search bar

[Liad]

Hi,

I’m trying to customize the look and feel of search bar in the header. I’ve been able to make some changes by adding this to the custom css:

.widget .search-field {
width: 100%;
height: 30px;
background-color: #eeeeee
}

I’m unable to figure out how to add the submit button as an icon next to the search bar or align the search bar to the right of the logo but on the left side of the header. Here is an example of what I’m trying to do: http://diyforme.com/wp-content/uploads/2018/04/search_header_example.png

Any help would be greatly appreciated 🙂

[Tom]

Hi there,

To get the overall layout, you can do this:

.header-widget .search-submit {
    display: block;
    height: 30px;
    line-height: 30px;
    padding-top: 0;
}

.header-widget .search-form {
    display: flex;
}

.site-logo {
    float: left;
}

.inside-header {
    display: flex;
}

.site-logo {
    order: 1;
}

.header-widget {
    order: 2;
    margin-left: 20px;
}

.secondary-navigation {
    order: 3;
    margin-left: auto;
}

Since it’s using Flexbox, you may want to run it through a program like this for maximum browser support: https://autoprefixer.github.io/

Making the button a search icon is a little harder. Are you using Font Awesome on the site? If so, which version?

[Liad]

Hey Tom,

Thanks for the excellent response. I ran the code through autoprefixer as you suggested and added it to the CSS. Everything worked as expected and I can play around with the margins to get things set where we’ll need them.

As for the submit button, I don’t run fontawesome on my site. Assuming an icon is the best way to go, how about this:
<i class=”material-icons” style=”color:#ffffff; font-size:25px;”> & # xe8b6;” </i> (I had to separate the first two letters so it would post correctly)
The button color would be: #e70137

I also thought about an image for this, however, when I tried to add it using CSS, the results were less than stellar: http://diyforme.com

What would you suggest in this case?

[Tom]

Try adding color: transparent to your current CSS.

Then add this as well:

.header-widget .search-submit:hover {
    color: transparent;
    background: url('/wp-content/uploads/2018/04/search_button_30px-01.png');
}

[Liad]

Awesome Tom, It worked like a charm!

If you don’t hear it enough, this really is an amazing theme you’ve created and I’ve been more than impressed with the support so far (great responses from you and your team and good documentation to go along with it). Seriously, keep up the excellent work!

Out of curiosity, if I were to go with the icon option (now or down the road), would it be significantly more difficult to implement?

Best regards,
Liad

[Tom]

Thank you! I really appreciate that 🙂

It wouldn’t be very difficult, but you would need the unicode for the font icon, instead of HTML.

[Author]

Posts