sticky search bar width

[Marijana]

Hey there,
I’m having trouble with the search bar in the sticky navigation menu.

I followed the topic and tried something on my side, but it seems that I’m missing something.

It looks good when scroll – floating on the right, but before it, after clicking on a search icon, it goes full width.

I want to set it on the right in both ways, and also it should look the same for different browsers.

Thanks

[David]

Hi there,

how do you want the Search to display?
Is it Full Width or it it the smaller c.30% width?

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

[Marijana]

Hey, I want it to be smaller 30% for example, and to open on the right after clicking (don’t want to be placed over the other elements in a navigation menu).

Thanks

[David]

You have this CSS:

#sticky-navigation .navigation-search input {
    max-width: 30%;
    float: right;
}

Change it to:

.navigation-search input {
    max-width: 30%;
    float: right;
}

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

[Marijana]

Ok that helped 🙂 Thanks!

One more thing, when I click on search, then scroll down it looks like this https://prnt.sc/uuwnnc in firefox browser, and in chrome there’s some space between it https://prnt.sc/uuwopj.

[Tom]

Hi there,

Try this:

li.search-item.active {
    position: absolute;
    right: 0;
}

I have noticed a couple of bugs with the navigation search and sticky navigation in 3.0.0 – will have them fixed in 3.0.1 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Marijana]

Looking good now!
Thanks!

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts