drop-down search bar

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!

as in the picture.

.

I see, try something like this:

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

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

@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?

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.

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

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

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

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

Let me know!

Oh you mean the placeholder?

You can use this filter:
https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder

example

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