Support » Theme: Responsive » Adding the search function into the responsive main nav

  • Hi I am looking into adding the search function into the main nav menu bar and when the site becomes mobile the search bar will appear under the menu item on the drop down.

    I know that <?php get_search_form(); ?> pulls the form in but cannot figure out how to put into menu.

    Any Ideas?

    Cheers

Viewing 2 replies - 1 through 2 (of 2 total)
  • I”m looking forward to seeing the solution on this one.

    I did this by adding this code in the functions.php of my child theme:

    add_filter('wp_nav_menu_items','add_search_box', 10, 2);
    function add_search_box($items, $args) {
    
            ob_start();
            get_search_form();
            $searchform = ob_get_contents();
            ob_end_clean();
    
            $items .= '<li>' . $searchform . '</li>';
    
        return $items;
    }

    You will need to modify your CSS some as well to prevent it from appearing on multiple lines:

    form#searchform
    {
    	margin: 0.5em 0em;
    	width: auto;
    }
    
    form#searchform .field
    {
    	width: auto;
    }
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adding the search function into the responsive main nav’ is closed to new replies.