Archived topic
search bar in menu / main menu slide out : text not displayed properly
5 replies · Started by Thomas on February 8, 2021
Hello
I'm having an issue with search in main menu.
I have configured my main menu in slide out, either one desktop or one tablet/mobile.
I followed instructions (assign empty menu to main and assign real menus to slide out).
I need a search function, so I added it to main menu.
The search icon displays well next to the slide out menu toggle icon, but when I click on search icon, the search input text is hardly visible... I guess because menus contains just the search icon and the slide out toggle.
How to increase the search input text width ?
Hi there,
can you change the Customizer > General --> Structure to Flexbox.
Then let me know and ill take a look at the layout.
Done !
Try adding this CSS:
.site-header .main-navigation .inside-navigation {
flex-wrap: nowrap;
}
.main-navigation .navigation-search.nav-search-active {
position: initial;
border: 1px solid #ccc; /* optional border */
margin-left: 20px;
}
@media(max-width: 768px) {
.mobile-header-navigation .site-logo {
order: -1;
}
.main-navigation .navigation-search {
width: unset;
}
.main-navigation .navigation-search input {
height: 50px;
max-width: 220px; /* set max width of mobile search */
}
}hi, thanks it works great, however I still have an issue on mobile : the logo is moving when I click on the search icon. Any idea how to avoid this ?
Maybe this CSS would be better - for mobile it will move the search field below the navigation:
@media(min-width: 769px) {
.site-header .main-navigation .inside-navigation {
flex-wrap: nowrap;
}
.main-navigation .navigation-search.nav-search-active {
position: initial;
border: 1px solid #ccc; /* optional border */
margin-left: 20px;
}
}
@media(max-width: 768px) {
.main-navigation .navigation-search.nav-search-active {
top: 100%;
}
}