From the first part of the class-header-header_main.php file you can see how the header is laid out. Code excerpt (non-working/not complete):
//html > head actions
add_action ( '__before_body' , array( $this , 'tc_head_display' ));
add_action ( 'wp_head' , array( $this , 'tc_favicon_display' ));
//html > header actions
add_action ( '__before_main_wrapper' , 'get_header');
add_action ( '__header' , array( $this , 'tc_logo_title_display' ) , 10 );
add_action ( '__header' , array( $this , 'tc_tagline_display' ) , 20, 1 );
add_action ( '__header' , array( $this , 'tc_navbar_display' ) , 30 );
//body > header > navbar actions ordered by priority
add_action ( '__navbar' , array( $this , 'tc_social_in_header' ) , 10, 1 );
add_action ( '__navbar' , array( $this , 'tc_tagline_display' ) , 20, 1 );
(Don’t worry about understanding this (I don’t), it’s just the names we’re after.
You want to insert your menu above the socials and the tagline. So, effectively, above the navbar, but at the same level as the logo.
If you look at function tc_logo_title_display()
(around line 118), you can see that it’s first checking whether there is a logo uploaded or not (<?php if( $logo_src != null) :?>
, which means “if the logo is not null”). Then the rest of the if/then/else displays the logo in a <div class="brand span3">
. Recall from the Twitter Bootstrap scaffolding that there will be a span9 further
down to bring the total to span3+span9=span12.
Sure enough, the next function tc_navbar_display()
(around line 162). There is a “navbar-wrapper” which has the class span9, which contains the navbar—both the normal navbar <div class="navbar notresp row-fluid pull-left">
and the responsive navbar <div class="navbar resp">
(the bootstrap makes sure that only one of these will display at any one time, depending on the screen width).
So you need to insert your menu in the navbar-wrapper, but before the navbar itself. You can also take advantage of navbar-wrapper’s span9, which is what you need.
Before you can do this, however, you need to go to Appearance > Menus and create yourself another menu. Let’s say you call it my-top-menu
.
Now we turn to Seahawksean’s code in here. For his case, where he needed a small menu (with a member login in it), he suggested the code:
<div class="member-login span2">
<?php wp_nav_menu( array('menu' => 'menu-member' )); ?>
</div>
Substituting your menu name, and taking into account that you already have a span9 defined (that is, you don’t need Seahawksean’s span2), your code will become:
<div class="my-top-menu-class">
<?php wp_nav_menu( array('menu' => 'my-top-menu' )); ?>
</div>
You should insert this after the line:
<div class="navbar-wrapper clearfix span9">
and before the line:
<div class="navbar notresp row-fluid pull-left">
That is, as we said above, in the navbar-wrapper, but before the navbar itself.
You can see my reasoning above, but I stress I’m new to this too. You should put your modified class-header-header_main.php into your child theme’s parts directory. I recommend that you have a pristine copy of class-header-header_main.php on your desktop, ready to overwrite the changes via ftp if anything goes wrong.
Don’t make the mistake I once made, which was to keep a backup copy of a php file in the theme / child-theme’s folder (!). This will load both the backup and the live version, and they will conflict with each other.
Now you have a working menu, the next step will be to style it. The code above just creates a vertical list. I think there was another post on this recently, so I’ll see if I can track it down.