[Resolved] Styling the search bar to drop down

[Margot]

Hi!

I’m having trouble with my search box which is displaying to the right of my navigation bar. I want it to drop down like the rest of my subnavigation drop downs. Any adice on how to style this would be wonderful. Thank you!

[Tom]

First you’ll want to remove this CSS:

input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

Then you could do something like this:

form.search-form.navigation-search {
    max-width: 200px;
    top: 45px;
    z-index: 10;
    border: 1px solid #DDD;
    border-top: 0;
}

[Margot]

That’s exactly what I was looking to do. One quick question, when the bar navigation bar becomes sticky, the search box shifts to the right, any way to change this?

Thank you for all of your help!

[Tom]

Any chance you can remove and add my CSS recommendations above? I’m not seeing them added yet.

[Margot]

Yes! Sorry, I was working locally but I updated it on the server. I also noticed that I set my mobile breakpoint to 1000px wide via the code you suggested on Github but the transition is strange with the hamburger icon going left first before it snaps right. Should I start a new topic about that?

[Leo]

Just to double check, this is the code you’ve used to change the breakpoint?
https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

[Margot]

You know what… it appears I had an outdated one. That one fixed the hamburger icon, but I’m still running into issues with the sticky instance of the search box. My apologies for not seeing that updated code. That was my oversight.

[Leo]

Can you edit Tom’s code to this:

@media (min-width:769px) {
    form.search-form.navigation-search {
        max-width: 200px;
        top: 45px;
        z-index: 10;
        border: 1px solid #DDD;
        border-top: 0;
    }
}

[Margot]

Hi Leo, it’s been updated but there’s still that shift happening. Not sure if that was supposed to fix it?

[Tom]

You have padding applied to the outer navigation element when not stuck, and then to the inner navigation element when stuck. If you choose one or the other (inner is better), the shift should disappear.

[Margot]

Hi Tom, I’m having trouble locating the selector for the outer/inner navigation element you mentioned. If you could just let me know the names of those selectors, I can make the edits. Thank so much for your help and patience!

[Tom]

It should be this: nav#sticky-navigation .inside-navigation

The other one with padding is: nav#site-navigation

[Margot]

Perfect! Thank you again!!

[Tom]

You’re welcome 🙂

[Author]

Posts