[Support request] How to show search as a field not overlay?

[Atef]

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.

[Tom]

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 🙂

[Atef]

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

[Tom]

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;
}

[Author]

Posts