[Resolved] drop-down search bar

Home Forums Support [Resolved] drop-down search bar

Home Forums Support drop-down search bar

Viewing 15 posts - 1 through 15 (of 58 total)
  • Author
    Posts
  • #2357364
    francesco

    I was wondering if there is a CSS to modify the search bar. I would like to set it to go down.

    I am attaching the CSS used so far.

    @media (min-width: 1025px) {
        form.search-form.navigation-search.nav-search-active {
            width: 31%;
            transform: translateX(-50%);
            left: 40%;
        }
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
            form.search-form.navigation-search.nav-search-active {
            width: 35%;
            transform: translateX(-50%);
            left: 41%;
        }
    }
    #2357957
    Ying
    Staff
    Customer Support

    Hi there,

    Looking at your CSS, I’m not sure what you are trying to achieve.

    Is there any example or mockup?

    Let me know!

    #2358774
    francesco

    as in the picture.

    #2358775
    francesco

    .

    #2358778
    francesco

    #2359221
    Ying
    Staff
    Customer Support

    I see, try something like this:

    form.search-form.navigation-search.nav-search-active {
        top: 100px;
        width: 40%;
        margin-left: auto;
    }
    #2359232
    francesco

    the left auto margin does not work very well, how can I correct?

    I leave you the link of the site.

    http://www.slys.it

    #2359262
    francesco
    @media (min-width: 1025px) {
        form.search-form.navigation-search.nav-search-active {
    			  top: 50px;
            width: auto-flow;
            transform: translateX(-50%);
            left: 52%;
        }
    }
    
    @media (min-width: 769px) and (max-width: 1024px) {
            form.search-form.navigation-search.nav-search-active {
    				top: 50px;
            width: 50%;
            transform: translateX(-50%);
            left: 51%;
        }
    }

    It might work?

    #2359311
    Ying
    Staff
    Customer Support

    auto-flow is an invalid value.

    Please remove your CSS and add this for desktop:

    @media (min-width: 769px) {
    .inside-navigation.grid-container {
        width: fit-content;
    }
    form.search-form.navigation-search.nav-search-active {
        top: 50px;
    }
    }

    Based on this, you can adjust the values and write your CSS for mobile.

    #2359702
    francesco

    Done. I deleted my CSS and inserted yours. can I increase the length of the search bar? it is very small.

    #2359709
    francesco

    ok, it should be fine. is there a code to create a “search” button?

    #2360034
    Ying
    Staff
    Customer Support

    is there a code to create a “search” button?

    What do you mean? Isn’t the search icon the search button?

    Let me know!

    #2360789
    Ying
    Staff
    Customer Support
    #2361328
    francesco

    example

    #2361871
    Ying
    Staff
    Customer Support

    Try this PHP snippet:

    add_filter( 'generate_navigation_search_output', function() {
        printf(
            '<form method="get" class="search-form navigation-search" action="%1$s">
                <input type="search" placeholder="Search" class="search-field" value="%2$s" name="s" title="%3$s"  />
    			<button class="nav-search-button">Search</button>
            </form>',
            esc_url( home_url( '/' ) ),
            esc_attr( get_search_query() ),
            esc_attr_x( 'Search', 'label', 'generatepress' ) 
        ); 
    } );

    Then add this CSS:

    .navigation-search.nav-search-active {
        display: flex;
    }
Viewing 15 posts - 1 through 15 (of 58 total)
  • You must be logged in to reply to this topic.