[Resolved] Add Search Bar to Header without displacing Logo

[toasterpc]

Okay, it seems I’m about able to launch.

I’m only missing the search bar.

The idea would be to have something like this:

But every time I try to insert the shortcode using Hooks, the entire menu gets displaced or the search bar ends up on top of the header.

Thanks in advance!

[Leo]

Hi there,

So you would want to move the menu items below the header then?

We did something similar with Prime:
https://gpsites.co/prime/

[toasterpc]

Exactly!

Only with the exception of using this search bar.

[Leo]

That’s the Search Prime is using as well.

So here is the hook element used to insert it:
https://www.screencast.com/t/dBzo3zDqU

Abd here is the CSS related to the header:

.inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
}

.woo-search {
    margin-left: 30px;
    margin-right: 30px;
    -webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
}

.header-widget {
	order: 10;
	line-height: 1em;
	font-size: 20px;
}

.header-widget p {
	margin: 0;
}

Prime is using the header widget to insert the text: GP | Gutenberg | Woo.

Navigation location is set to below header.

Let me know if this helps 🙂

[toasterpc]

If it helped?!

It worked wonders! I’ve been stuck there for two weeks!

Seriously, thanks!

[toasterpc]

By the way, I’ve been trying to adjust woo-search’s border-radius to 30px to no avail. Is there another selector I must take into account to give the search box rounded edges?

[Leo]

Something like this?

.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
    border-radius: 30px;
}

[toasterpc]

That’s it!

Thanks man, you’re a godsend!

[Leo]

No problem 🙂

[Author]

Posts