[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

  • This topic has 3 replies, 2 voices, and was last updated 1 month ago by Leo.
Viewing 4 posts - 1 through 4 (of 4 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
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.