Coming Soon
Subscription Marketplace - Buy and sell subscription products and services
1,062 views
in Articles by
How to add top menu to wordpress theme with search box?

Please log in or register to reply to this topic.

1 reply

by
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">

Related topics

Connect with us:
...