Change search bar

Hi Francesco,

Here is a CSS you can try with regards to this:

form.search-form.navigation-search.nav-search-active {
    background-color:var(--base);
    
}
form.search-form.navigation-search.nav-search-active input.search-field {
    opacity:1;
    background-color:var(--base);
}
@media (min-width: 1025px) {
    form.search-form.navigation-search.nav-search-active {
        width: 30%;
        transform: translateX(-50%);
        left: 50%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
        form.search-form.navigation-search.nav-search-active {
        width: 35%;
        transform: translateX(-50%);
        left: 50%;
    }
}

Hope this helps! :)

hi Feernando, thnx for all. Can i edit it only with css?

You’re welcome Francesco!

To answer your question, yes, you would need CSS to customize the search bar. :)

Feel free to reach out anytime if you’ll need assistance with anything else! :)

Hi fernando, if i want to simply decrease the size can i use this css?

@media (min-width: 1025px) {
    form.search-form.navigation-search.nav-search-active {
        width: 30%;
        transform: translateX(-50%);
        left: 50%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
        form.search-form.navigation-search.nav-search-active {
        width: 35%;
        transform: translateX(-50%);
        left: 50%;
    }
}

Hi there,

yes, that CSS should just resize and center the search field.