Archived topic

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

5 replies · Started by Jean on August 25, 2020

Viewing posts 1–6 of 6

August 25, 2020 at 11:14 am #1417860

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.

August 25, 2020 at 1:37 pm #1418046

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 :)

August 27, 2020 at 6:52 pm #1421207

Good enough -- thanks ;)

August 28, 2020 at 8:30 am #1422004

No problem :)

October 6, 2020 at 11:16 am #1475063

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

October 6, 2020 at 2:23 pm #1475324

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

Thanks :)

This archived topic is closed to new replies.

Start building better websites today.