drop-down search bar – GeneratePress

This topic has 57 replies, 5 voices, and was last updated 3 years, 2 months ago by Fernando.

Viewing 15 posts - 1 through 15 (of 58 total)

1 2 3 4 →

Author

Posts
September 29, 2022 at 1:34 am #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%;
    }
}
```
September 29, 2022 at 10:01 am #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!

September 30, 2022 at 6:39 am #2358774

francesco

as in the picture.

September 30, 2022 at 6:40 am #2358775

francesco

.

September 30, 2022 at 6:42 am #2358778

francesco

September 30, 2022 at 12:16 pm #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;
}
```
September 30, 2022 at 12:37 pm #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

September 30, 2022 at 1:11 pm #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?
September 30, 2022 at 2:44 pm #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.
October 1, 2022 at 7:28 am #2359702

francesco

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

October 1, 2022 at 7:40 am #2359709

francesco

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

October 1, 2022 at 11:58 am #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!

October 2, 2022 at 11:45 am #2360789

Ying
Staff
Customer Support

Oh you mean the placeholder?

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

October 3, 2022 at 3:53 am #2361328

francesco

example

October 3, 2022 at 11:36 am #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;
}
```
Author

Posts