[Resolved] drop-down search bar

[francesco]

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.

[Ying]

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

You can use the private info field.

[francesco]

site

[Fernando]

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?

[francesco]

I would like to create a similar effect

[Fernando]

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

[francesco]

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.

[Ying]

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?

[francesco]

as in the picture

[Ying]

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

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

[francesco]

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.

[Fernando]

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

[francesco]

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

is this part necessary?

[francesco]

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

[francesco]

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

[Author]

Posts