cant reduce search box

Hi there,

try adding this CSS:

nav .navigation-search.nav-search-active {
    max-width: 400px;
    left: unset;
}

Thanks, David!

Just one more thing:

1) how can I add border color and radius?

2) Is there any chance to add a prefilled text into the search box?

Thanks!

Colors can be set in the Customizer > Colors.
But as you're going to need some CSS for the other styles you can do it all there.

Quick question, apart from adding the placeholder text, any other changes eg. a submit button. As the former will require some PHP so its easier to handle it all in one go :)

Hey David,

1) Customizer > Colors. I could only find background and text color options for the search box there. So would be great to know the CSS for the borders.

2) Nope, no submit button is needed, just the placeholder text.

Thanks, David!

1. Replace my other CSS with:

nav.main-navigation .navigation-search  {
    max-width: 400px;
    left: unset;
    right: -10px !important;
    margin-top: auto;
    border-radius: 100px;
    border: 3px solid #000;
    height: 50px;
    top: 5px;
    overflow: hidden;
}
nav .navigation-search input[type="search"] {
    height: 45px;
    padding: 2px 20px;
}
.main-navigation .menu-bar-item.close-search a {
    background-color: transparent !important;
}

2. For the placeholder text you need this PHP Snippet:

add_filter( 'generate_search_placeholder', function() {
    return 'Search';
} );

Thanks, Dave!

1) Done!

2) Paste the snippet (I use the code snippets plugin) but no text comes up in the search box. Image attached.

Sorry my bad - you need this snippet:

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

Awesome! Thanks Dave!

You're welcome!