Disable Search Modal

Support
#1

Hello: I would like to disable the modal style search that covers the full window, so when I click on the icon, I can style my own search bar next to the icon.

#2

Hi there,

Thanks for writing in.

It’s a big confusing why not just remove the search modal element and add inline search? Please provide some clarification, is it just making the modal transparent?

Thanks!

#3

Hi - the search style on the x-theme takes up the full window as an overlay/modal. How would I achieve having a basic search bar that displays in the menu like the attachment. Nevermind the actual CSS/styling. I just want to achieve having a standard search style.

#4

Hi there,

The search options that is available to the X menu is set to link the icon to a modal that contains the search textbox. What you can try is to disable the search option and add this code in the functions.php file of the child theme:

add_filter('wp_nav_menu_items','add_search_box_to_menu', 99999, 2);

function add_search_box_to_menu( $items, $args ) {
    
    if( $args->theme_location == 'primary' ){
        $items .= '<li class="menu-item menu-item-search">';
        $items .= '<form method="get" id="searchform" class="form-search">
  <label for="s" class="visually-hidden">Search</label>
  <input type="text" id="s" class="search-query" name="s" placeholder="Search">
</form>';
        $items .= '</li>';
    }

    return $items;
}

The code above should add the default wordpress search box. You will have to style it accordingly to align the searchbox correctly.

Hope this helps.

#6

Hi there,

Let us know if the solution works :slight_smile:, else, we’ll have to check it and recommend some workaround.

Thanks!

#7

Hi Rad, my apologies, this worked. Thanks for your help.

#8

On behalf of my colleague, you’re welcome. Cheers!