Decrease search box width

Hi there,

is that the custom search field in the desktop navigation ?
If so see my reply to your original topic where you can define the max-width:

https://generatepress.com/forums/topic/want-to-display-the-search-box-same-in-this-way/#post-1828694

If its for the mobile nav search then you use this CSS:

.navigation-search.nav-search-active {
    max-width: 250px; /* Set width here */
    left: auto !important;
}

Acutally, I dont know how to ask it. Bue I want to decrease the height and width of search box

Hi Rohith,

Try this CSS:

.inside-navigation .custom-search {
    height: 30px;
}
.custom-search input[type="search"] {
    max-width: 50px;
}

It decreased but the search box has lost its responsiveness

Please try this CSS:
https://generatepress.com/forums/topic/decrease-search-box-width/#post-1835084

Everything is okay but the search text is not at the center

Try this:

.inside-navigation .search-form {
    display: flex;
    align-items: center;
    height: 100%;
}

Perfect, Thanks!

I have some other issue with the search icon the Sticky Navigation. Whenever we click, it Is floating left side. I want it to float right side and the background color is also not changing from Colors option.

No problem :)

Please open a new topic for the new question.

Thanks!