drop-down search bar

Thanks, it works correctly. but I would like to customize it. is it possible to create a margin? the button appears larger than the search bar.

Can you provide your site link so I can take a look at the search bar?

You can use the private info field.

site

Hi Francesco,

This is how it looks like viewing the Search from our end: https://share.getcloudapp.com/jkuWvmrX

It's different from your screenshot. May we know how you would like it to look like?

I would like to create a similar effect

Try adding this CSS:

.inside-navigation.grid-container form.search-form .search-field {
    background-color: #fff;
}

.inside-navigation.grid-container form.search-form {
    background-color: #8ad6c1;
    padding: 10px;
    display: flex;
    align-items: center;
}

it works, but in the mobile version is it possible that the search button remains in the bar as in the picture? carry all the current code.

If the search button goes up, it will look like this:
https://www.screencast.com/t/DoiTqcxQSg10

Where would you like the close button to be?

as in the picture

@media (max-width: 768px) {
    form.search-form.navigation-search.nav-search-active {
    display: flex;
}

button.nav-search-button {
    margin-right: 56px;
    border: none;
}
}

Thanks, everything seems to work perfectly now.

Can I ask if all these CSS are needed or do I need to make further changes?

@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%;
    }
}
.masonry-load-more {
    text-align: center;
}

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

.navigation-search.nav-search-active {
    display: flex;
}

.inside-navigation.grid-container form.search-form .search-field {
    background-color: #fff;
}

.inside-navigation.grid-container form.search-form {
    background-color: #8ad6c1;
    padding: 10px;
    display: flex;
    align-items: center;
    }
	
}

@media (max-width: 768px) {
    form.search-form.navigation-search.nav-search-active {
    display: flex;
}

button.nav-search-button {
    margin-right: 56px;
    border: none;
}
}

They are CSS related to the search bar.

I think you can remove these:

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

Then, edit this:

form.search-form.navigation-search.nav-search-active {
    top: 45px;
	  width: 70%;
	  left: 65%;
}

to this:

form.search-form.navigation-search.nav-search-active {
    top: 45px;
	  width: 70%;
	  left: 65%;
transform: translateX(-50%);
}

.masonry-load-more {
    text-align: center;

is this part necessary?

.masonry-load-more {
    text-align: center;
}

@media (min-width: 769px) {
.inside-navigation.grid-container {
    width: fit-content;
}
form.search-form.navigation-search.nav-search-active {
    top: 45px;
	  width: 70%;
	  left: 65%;
transform: translateX(-50%);
}

@media (max-width: 768px) {
    form.search-form.navigation-search.nav-search-active {
    display: flex;
}

button.nav-search-button {
    margin-right: 56px;
    border: none;
}
}

.navigation-search.nav-search-active {
    display: flex;
}

.inside-navigation.grid-container form.search-form .search-field {
    background-color: #fff;
}

.inside-navigation.grid-container form.search-form {
    background-color: #8ad6c1;
    padding: 10px;
    display: flex;
    align-items: center;
    }
	
}

@media (max-width: 768px) {
    form.search-form.navigation-search.nav-search-active {
    display: flex;
}

button.nav-search-button {
    margin-right: 56px;
    border: none;
}
}

I have a problem, when I press search it opens the article below.