[Resolved] Place search bar above the header image / banner

[Sally]

We would like to place a search bar above the header image / banner, similar to the search function in these forums, with a search field and a search button. Can you suggest how to do this in Generate Press so that the search is the width of the site content container?

[Tom]

Hi there,

First, place the “Search” widget into the “Header” widget area in “Appearance > Widgets”.

Then, add this CSS:

.header-widget {
    float: none;
    max-width: 100%;
}

.header-widget .widget .search-field {
    width: 85%;
}

.header-widget .widget_search .search-submit {
    display: inline-block;
    width: 10%;
}

Let me know how it works out 🙂

[Sally]

Thanks! With a minor CSS adjustment, this works really well.

[Tom]

You’re welcome 🙂

[Author]

Posts