Archived topic
sticky search bar width
7 replies · Started by Marijana on October 7, 2020
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
Hi there,
how do you want the Search to display?
Is it Full Width or it it the smaller c.30% width?
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
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;
}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.
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 :)
Looking good now!
Thanks!
No problem! :)
