[Resolved] navigation search

Home Forums Support [Resolved] navigation search

Home Forums Support navigation search

  • This topic has 16 replies, 4 voices, and was last updated 1 week ago by Elvin.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #2057804
    alexis

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

    Alexis
    agency K-LYA

    #2057889
    David
    Staff
    Customer Support

    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.

    #2057901
    alexis

    Thanks yes that would be great

    Alexis
    agency K-LYA

    #2057921
    David
    Staff
    Customer Support

    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

    #2057923
    alexis

    Perfect, thank you very much

    Alexis
    agency K-LYA

    #2058334
    David
    Staff
    Customer Support
    #2075709
    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.

    Alexis
    agency K-LYA

    #2075995
    Elvin
    Staff
    Customer Support

    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?

    A wise man once said:
    "Have you cleared your cache?"

    #2076207
    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
    agency K-LYA

    #2077024
    alexis

    Do you have a solution please ? ๐Ÿ˜ƒ

    Alexis
    agency K-LYA

    #2077070
    Ying
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #2077088
    alexis

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

    Alexis
    agency K-LYA

    #2077175
    Ying
    Staff
    Customer Support

    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.

    #2077227
    alexis

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

    Alexis
    agency K-LYA

    #2077407
    Elvin
    Staff
    Customer Support

    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;
        }
    }

    A wise man once said:
    "Have you cleared your cache?"

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.