[Resolved] constrain sticky nav search bar width, match with non-stick version

Home Forums Support [Resolved] constrain sticky nav search bar width, match with non-stick version

Home Forums Support constrain sticky nav search bar width, match with non-stick version

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1417860
    Jean

    When I scroll down and the header goes sticky, the search bar switches to full-width, which is weird, I think, on the desktop — to click and have the cursor show up way on the other side of the site. I can try to sort of manually make it match the non-stick version with something like…

    .navigation-search input[type="search"], .navigation-search input[type="search"]:focus {
        background-color: #3f3f3f;
        width: 540px;
        margin-right: 70px;
    }
    .main-navigation .main-nav ul li.search-item.active > a {
        background-color: transparent;
    }

    …but I’m wondering if there’s a cleaner way you know of — maybe a setting or settings I could change?

    Thanks and lmk if you have any questions.

    #1418046
    Leo
    Staff
    Customer Support

    Hi there,

    Give this CSS a shot:

    #sticky-navigation .navigation-search input {
        max-width: 40%;
    }

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

    Let me know if this helps πŸ™‚

    #1421207
    Jean

    Good enough — thanks πŸ˜‰

    #1422004
    Leo
    Staff
    Customer Support

    No problem πŸ™‚

    #1475063
    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.

    Thanks

    #1475324
    Leo
    Staff
    Customer Support

    Can you open a new topic and link me to the page in question?

    Thanks πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘constrain sticky nav search bar width, match with non-stick version’ is closed to new replies.