Search Bar Visual

[William]

Hi –

I imported the SPLIT site and customized a bit.

When clicking on the search bar, it overlays on top of the site logo and the navigation buttons. (image below)

View post on imgur.com

Is there a way to make this look better?

Thank you,
William

[David]

Hi there,

we could limit its width to match the left hand navigation with this CSS:

@media (min-width: 768px) {
    .inside-navigation .navigation-search.nav-search-active {
        left: calc(100% - 285px);
        max-width: 285px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[William]

Thanks David. Would that fix the issue on mobile as well?

I’m a newbie, where would I put this CSS inside wordpress to get this going?

Thank you!

[Leo]

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts