Archived topic
Add Search Bar to Header without displacing Logo
8 replies · Started by toasterpc on May 28, 2019
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!
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/
Exactly!
Only with the exception of using this search bar.
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 :)
If it helped?!
It worked wonders! I've been stuck there for two weeks!
Seriously, thanks!
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?
Something like this?
.dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input {
border-radius: 30px;
}That's it!
Thanks man, you're a godsend!
No problem :)
