WordPress.org

Forums

Responsive
Adding the search function into the responsive main nav (3 posts)

  1. AdamCatlow
    Member
    Posted 2 years ago #

    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

  2. noahjonah
    Member
    Posted 2 years ago #

    I"m looking forward to seeing the solution on this one.

  3. jmccarver1
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.