[Resolved] Search Bar Shorter

[Fibercom]

Hi!
Is there an option for make the search bar shorter or I could customize it?

Thanks!

[David]

Hi there,

try this CSS – it shortens the width and places the search below the nav, i added the extra rules for where you can change the colors.

.navigation-search {
    height: 30px;
    bottom: auto;
    top: 115%;
}

.navigation-search .search-field {
    width: 50%;
    float: right;
    min-width: 300px;
}
.navigation-search input:hover,
.navigation-search input:focus {
    opacity: 1
};

.navigation-search input[type="search"],
.navigation-search input[type="search"]:active {
    color: #ffffff;
    /* Change text color */
    background-color: #ffffff;
    /* change search field background */
    border: 1px solid #dddddd; 
    /* add border color */
}

[Fibercom]

Thanks!

And how could I add a grey border color, please?

Thanks again!

[Fibercom]

Or hover in white, normal transparent.

Thanks!

[David]

I edited the code above, you can see where the border can be added. Also an extra rule to make the background color solid when hovered or in focus.

[Fibercom]

THANK you very much!

[David]

You’re welcome

[José]

Hello, I would like to customize the navigation bar by adding a text “search product …” or other text to guide the client to write what they are looking for in the field space. The idea is to facilitate the user where to type.

Thank you

José Alejandro

[Leo]

Hi there,

Can you open a new topic and link us to the page in question?

Thanks!

[Author]

Posts