Site logo

[Resolved] sticky search bar width

Home Forums Support [Resolved] sticky search bar width

Home Forums Support sticky search bar width

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1475948
    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

    #1476180
    David
    Staff
    Customer Support

    Hi there,

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

    #1476535
    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

    #1476721
    David
    Staff
    Customer Support

    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;
    }
    #1476916
    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.

    #1477422
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1477870
    Marijana

    Looking good now!
    Thanks!

    #1478812
    Tom
    Lead Developer
    Lead Developer

    No problem! 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.