[Resolved] Formatting the Navigation Search Box

[lunatrix]

I would like to add a border around the active search box that matches my site colours. Currently, I have managed to style it with a light grey background, but when you click on it and start to type, a light blue border box appears (see attached) around it. I would like that box to be as soon as I click on the search icon, and I want to make it orange (#e37222)

[Tom]

Hi there,

Give this CSS a shot:

.navigation-search input {
    outline: 0 !important;
}

.nav-search-active {
    border: 2px solid #e37222 !important;
    border-radius: 5px;
    margin-top: -2px;
}

[lunatrix]

Perfect ! How can I make the corners a little more ‘soft’ ? I tried border-radius, but since it’s outline and not border, it’s still squaring off the corners.

PS – I’m LOVING GeneratePress, it’s so easy to configure 🙂

[Tom]

Try the above instead: https://generatepress.com/forums/topic/formatting-the-navigation-search-box/#post-690329

Thank you! Great to hear 🙂

[lunatrix]

That’s exactly what I wanted. Thanks!

[Tom]

You’re welcome 🙂

[Author]

Posts