Archived topic

Place search bar above the header image / banner

3 replies · Started by Anonymous on March 10, 2016

Viewing posts 1–4 of 4

March 10, 2016 at 10:31 am #178304

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?

March 11, 2016 at 12:19 am #178417

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 :)

March 13, 2016 at 2:54 pm #179044

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

March 13, 2016 at 7:30 pm #179068

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.