Question

How to add top menu to wordpress theme with search box?

Answer 1

Step-1 add to functions.php

function st_topmenu() {
 echo '<div id="topbar">';
 echo '<div class="container">';
 wp_nav_menu( array( 'container_class' => 'menu-header', 'depth' => '1', 'theme_location' => 'topmenu', 'menu_id' => 'topmenu'));
 echo '<form role="search" method="get" id="searchform" action="'.home_url( '/' ).'">';
 echo '<div><label class="screen-reader-text" for="s">Search for:</label>';
 echo '<input type="text" value="" name="s" id="s" />';
 echo '<input type="submit" id="searchsubmit" value="Search" />';
 echo '</div>';
 echo '</form>';
 echo '</div><!--/.container-->';
 echo '<div class="clear"></div>';
 echo '</div><!--/#topbar-->';
}
add_action('st_above_header','st_topmenu', 1);
register_nav_menus( array('topmenu' => __( 'Top Navigation', 'smpl' )));

Step -2 add to css

/* Top Navigation */
  
/* container element */
#topbar {
 width: 100%;
 background-color: #d5d5d5;
 margin: 0;
 border-bottom: 1px solid #f4f4f4;
}

#topbar .container {
 margin: 0 auto;
 width: 940px;
}

/* Search Form */
#topbar #searchform {
 float: right;
 margin: 5px 0 0 0;
}
 
/* link styles */
#topbar li a {
 color: #4a81d3;
 text-decoration: none;
 border-right: 1px solid #eaeaea;
 padding: 10px;
 display: block;
}
#topbar .menu-header {
 border-left: 1px solid #f4f4f4;
}
 
#topbar li a:hover {
 color: #333;
 background-color: #e5e5e5;
}
 
/* list reset */
#topbar ul,#topbar li {
 margin: 0;
 padding: 0;
 list-style: none;
}
#topbar li {
 float: left;
 line-height: 100%;
}

Step -3 add this snippt to header.php

Lastly, edit header.php and add this line:

<?php do_action('st_above_header');?>

Just before:

<div id="wrapper">