[Resolved] drop-down search bar

[Fernando]

Can you disable “Under Maintenance/Construction” mode of your site or share a staging site? I’ll check both inquiries.

[francesco]

done

[Tom]

Try adding this:

.navigation-search {
    z-index: 9999;
}

Let us know 🙂

[francesco]

Endless thanks Tom.

I carry the piece of CSS related to the search bar. I ask if anything else needs to be corrected. thank you in advance.

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

.navigation-search {
    z-index: 9999;
}

[Tom]

Looks good to me! Glad we could help 🙂

[francesco]

Sorry but I realized that in the mobile devices screen the search space remains green. instead I would like it white as for the other screens. it would be possible?

[Ying]

Try add this CSS:

.navigation-search input[type="search"] {
    background-color: #fff;
}

[francesco]

it seems not to work

[David]

Try this:

.navigation-search input[type="search"], 
.navigation-search input[type="search"]:active, 
.navigation-search input[type="search"]:focus {
    background-color: #fff;
}

[francesco]

Very thanks David, it works perfectly now. Can I send the css concerning the search field so as to see if there is something to correct or delete?

[David]

What other issues do you have ?

[francesco]

None, but I just wanted to know if maybe I have css that I can remove from all those entered for the search field.

[David]

It looks all ok to me 🙂

[francesco]

thx David

[David]

Glad we could be of help!!

[Author]

Posts