Site logo

Archived topic

drop-down search bar

57 replies · Started by francesco on September 29, 2022

Viewing posts 31–45 of 58

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

done

Try adding this:

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

Let us know :)

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

Looks good to me! Glad we could help :)

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?

Try add this CSS:

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

it seems not to work

Try this:


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

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?

What other issues do you have ?

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

It looks all ok to me :)

thx David

Glad we could be of help!!

This archived topic is closed to new replies.