[Resolved] How to postion and style search box in Header

[bluebit]

See my site, I currently have the search box in the nav bar and am trying to move it to the header. I did this by adding a search widget to the header, but the search button has disappeared and I’d like to position the search box closer to the header and make it really long. What css or snippet code do I need to style it?

Thanks

[Tom]

Hi there,

Give this CSS a shot:

.widget_search .search-submit {
    display: block;
}

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

.inside-header {
    display: flex;
    align-items: center;
}

.header-widget {
    max-width: none;
    order: 2;
    flex-grow: 1;
    margin-left: 20px;
}

.header-widget .search-form > label {
    flex-grow: 1;
}

.header-widget input.search-field {
    max-width: none;
}

Depending on your browser compatibility needs, you may want to run the CSS through this tool: https://autoprefixer.github.io/

[bluebit]

that works, but for some reason on my iphone safari browser the search box has rounded corners, how to make the corners not round? On desktop the corners look perfectly fine.

[bluebit]

i think i found a solution:

input[type=”search”]::-webkit-search-decoration,
input[type=”search”]::-webkit-search-cancel-button,
input[type=”search”]::-webkit-search-results-button,
input[type=”search”]::-webkit-search-results-decoration {
-webkit-appearance:none;
}

input[type=search] {
-moz-appearance:none;
-webkit-appearance:none;
}

[Tom]

Awesome, glad it’s working 🙂

[Author]

Posts