Add search icon to primary navigation?

  • Is it possible to add a search icon to the primary navigation in the free theme as it appears in the premium demo? Specifically the ‘menu-search-icon-kt panel’.

    I have added a search form in my child theme functions.php using the code below but it appears in every menu creating CSS styling issues.

    Thanks in advance and thanks for the great theme.

    <?php
// add your custom functions here
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;
}
Viewing 1 replies (of 1 total)
  • Thread Starter nemonem

    (@nemonem)

    Solved the problem of search box appearing in each menu with:

    <?php add_filter('wp_nav_menu_items','add_search_box', 10, 2); 

function add_search_box($items, $args) {
  if ($args->theme_location == 'primary_navigation') {
        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean(); 

    $items .= '<li class="searchbox">' . $searchform . '</li>';
  }
  return $items;    

}?>

    My inelegant solution for styling:

    <?php add_filter('wp_nav_menu_items','add_search_box', 10, 2); 

function add_search_box($items, $args) {
  if ($args->theme_location == 'primary_navigation') {
        ob_start();
        get_search_form();
        $searchform = ob_get_contents();
        ob_end_clean(); 

    $items .= '<li class="menu-search-icon-kt panel"><a class="menu-search-btn collapsed" data-toggle="collapse" data-parent="#menu-main-menu" data-target="#kad-menu-search-popup" style="height: 120px; line-height: 120px;"><i class="icon-search"></i></a><div id="kad-menu-search-popup" class="collapse"><form role="search" method="get" id="searchform" class="form-search" action="https://MyWebsiteName.com/"> <label class="hide" for="s">Search for:</label> <input type="text" value="" name="s" id="s" class="search-query" placeholder="Search"> <button type="submit" id="searchsubmit" class="search-icon"><i class="icon-search"></i></button></form></div></li>';
  }
  return $items;    

}?>

    Clearly there is a better way and I need to improve my understanding of PHP and CSS, but it is working for now.

Viewing 1 replies (of 1 total)
  • The topic ‘Add search icon to primary navigation?’ is closed to new replies.