Archived topic
How to adjust text field placement in primary navigation site search bar
5 replies · Started by David on April 8, 2021
I am implementing site search in the primary navigation menu, and am wondering if there's a way to adjust the text field so that when a user types in a search query, it doesn't run into the navigation menu.
Screenshot below:
Screenshot of Text Field in Primary Navigation Site Search
Any thoughts are appreciated!
Hi there,
We can do this with CSS.
How do you want it to behave? Any particular layout you have in mind?
Mockup photos of how you want it laid out would be nice. Any chance you can make one? Let us know.
Hi Elvin, thank you so much for the response! I would place the text field for the site search bar right here.
Site Search Text Field Placement
As far as behavior, I would make the text field white so that it's clear to users that they can type in a query in that space.
Let me know if this helps...
Hi David,
Try this CSS:
.navigation-search.nav-search-active {
top: 38px;
width: 50%;
}Thank you so much Ying, implemented and looks fantastic!
Result and code below:
.navigation-search.nav-search-active {
top: 36px;
width: 100%;
background-color: white;
}
It does look very nice :)
