Archived topic
Search Field in Navigation (How to 100% width?)
3 replies · Started by Joezer on May 2, 2021
Hello,
I am quite surprised that I wasn't able to solve this on my own after a few hours of trying. I inserted a custom search field in between the logo and nav items using generate_inside_navigation and putting "order: 5" in CSS to achieve this. What I was hoping to do now is for this search field to kinda fill the empty spaces in between the logo and the nav items. I tried width:100% and different combinations but it doesn't work. I have it now with a specific width: 600px; and only then will it work, but the problem is when the screen becomes smaller the 600px width pushes the logo above and the secondary nav below. It is not responsive.
Is there a way to do this? I only want it for tablet screens and above to be responsive and fill the empty space between logo and nav items. But it will be hidden in mobile.
Thanks
Hi there,
try this CSS:
.inside-navigation .custom-search-form-v2 {
flex: 1;
}
.inside-navigation .custom-search-form-v2 label,
.inside-navigation .custom-search-form-v2 input {
width: 100%;
}The inside-navigation container uses flexbox, the first CSS rule above tells the Form container to Grow to fill the available space.
Then the input field and label it is inside is set to 100% width to fill that space.
This was the solution that I was looking for. I can even change the nav items position into left or right and the search field is still filling up the available spaces regardless of its position. Amazing, amazing, amazing. I appreciate the explanation, David. Thank you so much!
Regards,
Joe
Glad to be of help!
