How do i add a second top button in the Bistro theme

We had a request about adding a second button in the Bistro theme topbar, and have decided to add the discussion here for the adventurous.

Remember that this is not a step by step. If you do not understand some design, you might take a while to get all this figured.

If you impliment this and whant to add something, please drop me a line at and i’ll add your suggestion

In the functions.php file on line 93 you will create another nav position as the three that’s there.

register_nav_menu( 'topbar', __( 'Top Bar Menu', 'localize' ) );

you will rename topbar to ttopbar and add any description

then in public/styles/site.css you will duplicate section 02 :

 * -02- TOPBAR
 * */

you will rename all instances of topbar-header to ttopbar-header.

you will change the ttopbar-header right position till it’s positioned where you want it.

you will also add the following line:

.ttopbar-header {
  background: url("images/bookingslip1.png") no-repeat scroll center center transparent;

in header.php you will duplicate the following around line 64:

if ( has_nav_menu('topbar' ) ) {
wp_nav_menu( array( 'container_class' => 'topbar-header', 'theme_location' => 'topbar') );
} ?>		

you will change topbar-header to ttopbar-header and topbar to ttopbar.

Then you’ll add the menu item in appearances-menu. and you should have a second button.

What’s not described in this part is how to add the change for responsive design, you’ll have to work a bit to get that one solved.