Archived topic
Search bar location and typography
1 reply · Started by Christopher on November 21, 2020
Hi,
I'm having a problem with the search bar. I have the search in the primary navigation inside the header, but the search bar opens over the logo which doesn't look great.
How can I get this to open at a more suirable location like in some white space below the logo? I've put the webstie in the private information bar.
I'm grateful for any help you can provide
Hi there,
I see a couple options here.
- We could use this CSS to make the search bar narrow so it doesn't overlap the logo:
.main-navigation .navigation-search {
width: 50%;
}
.navigation-search.nav-search-active {
left: auto;
}Then you can use the color options under Colors > Primary Navigation to make it more obvious.
- Or we can use this CSS to make it show below the logo:
.main-navigation .navigation-search {
top: 100%;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
You can also combine both snippets as well.
Let me know if this helps :)
