[Resolved] Search bar location and typography

[Christopher]

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

[Leo]

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 🙂

[Author]

Posts