Hi there,
looking at your design, moving the search field into the space available, would create a bit of a responsive nightmare.
How about this as a solution?
.inside-navigation .search-form.navigation-search {
position: static;
margin-top: 10px;
order: 100;
visibility: visible;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease;
}
.search-form.navigation-search.nav-search-active {
max-height: 1000px;
}
.search-form.navigation-search {
border: 1px solid #ccc;
}
.navigation-search:not(.nav-search-active) input[type="search"] {
pointer-events: none;
}
And then you can use the PHP Snippet provided here to add a Placeholder to the search input field:
https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder