Archived topic
How to show search as a field not overlay?
3 replies · Started by Atef on January 14, 2018
Hi,
thanks for such a great theme. I like it a lot and bought the premium version.
I am just wondering if there is a way to change the search field from an overlay to an actual search field that shows, like this:
https://prnt.sc/i0k6gj
For me, the overlay is stylish but confusing, especially on mobile. My target audience are not tech savvy and might get confused.
I have listed one of my test sites in this support ticket.
thanks a lot.
Hi there,
You could try something like this:
add_action( 'generate_inside_navigation', 'tu_add_custom_search' );
function tu_add_custom_search() {
echo '<div class="custom-search">';
get_search_form();
echo '</div>';
}Then this CSS:
.main-navigation .custom-search {
float: right;
}Might need some CSS adjustments, but that should get you started :)
Hi Tom,
Thanks a lot for the prompt response.
sorry if my question was not clear enough.
What I want to do is to replace the overlay on the desktop and mobile menu by a search box.
so when people click on the magnifying glass, they see a searh box that opens, lot an overlay.
the solution you gave me added a search box to the menu on desktop, but the overlay still exist when I click on the magnifying glass.
so is there a way to achieve this?
thanks
What about something like this?:
.navigation-search.nav-search-active {
max-width: 200px;
left: auto;
right: 50px;
}
.navigation-search input[type="search"] {
background: #fff;
opacity: 1;
height: 40px;
margin-top: 10px;
}
.main-navigation .main-nav ul li.search-item a {
line-height: 40px;
margin-top: 10px;
}