[Resolved] navigation search

[alexis]

Hello I see that the search bar uses the width of the navigation. Can it take the whole width like the attached example?

[David]

Hi there,

should be possible, do you have a dev site setup with the nav etc. in place ? I can then take a look at the CSS requirements to do that.

[alexis]

Thanks yes that would be great

[David]

Maybe something like this:

.inside-navigation {
    position: static;
}
.inside-header {
    position: relative;
}
.navigation-search.nav-search-active {
    bottom: 0;
    background: transparent radial-gradient(closest-side at 50% 50%, #FFAA29 0%, #FF8424 100%) 0% 0% no-repeat padding-box;
    display: flex;
}
.navigation-search input[type="search"], .navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus {
    position: relative;
    background-color: #fff; /* this can be set in the Customizer */
    max-width: calc(100vw - 200px); /* this needs adjusting for smaller screens */
    margin: auto;
    border-radius: 50px;
    top: 16px;
}

Left a couple of comments in the above CSS.

Adding placeholder text – see here:

https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder

[alexis]

Perfect, thank you very much

[David]

You’re welcome!

[alexis]

Hi David,

I’m coming back to you because in mobile it doesn’t display correctly. And I don’t understand how it works.

I added a fixed position in addition so the menu changes. We can not have the same menu. Because there are two menus. I corrected it on desktop.

[Elvin]

Hi Alexis,

Can you share a screenshot of the part in mobile that doesn’t display correctly?

And perhaps provide a mockup of how you want it to be laid out?

[alexis]

Hi Elvin,

Actually I want to have the same nav in static position (i.e. when the page is loading, without scrolling) as the nav in sticky position.

Why can’t we have the same nav in fixed and static ? because here I have to modify 2 nav

Concerning the search bar, I want to have the same thing as in desktop. Because when we click, there is no cross to close and especially the search bar does not cover the mobile navigation.

[alexis]

Do you have a solution please ? 😃

[Ying]

Hi Alexis,

Can you go to customizer > layout > sticky navigation, set it to desktop only?

Then add this CSS:

@media (max-width: 1024px) {
    #masthead {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
    }
}

Let me know if this helps 🙂

[alexis]

It’s perfect, thank you. I just have the problem of the search bar. It doesn’t cover the menu like on desktop.

[Ying]

You have this CSS in your child theme:
https://www.screencast.com/t/p758NF0Z

Just activate the CSS should achieve what you are looking for on mobile.

[alexis]

Yes sorry but with this solution I don’t have the button to close anymore.

[Elvin]

Hi there,

Try this CSS for the close button.

@media (max-width: 768px){
    nav#site-navigation.has-active-search .menu-bar-items {
        display: block !important;
        z-index: 101;
        margin-top: -90px;
        background-color: unset !important;
    }
}

[Author]

Posts