I am needing help figuring out my main navigation bar. I had created it with the default navigation hook but now want the ability to hide pages so they do not show up on the main navigation. However whenever I add a new page it automatically shows up in the navigation (but I do not want this, such as the case of 2009 Galley, 2010 Gallery & 2011 Gallery under the GALLERY tab.)

This is my website

This is the code I had in the header.php file

<div id="access" role="navigation">
<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>"><?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div><!-- #access -->

Which gives me this great looking navigation.

enter image description here

Now I have tried to replace that with this

<div id="access" role="navigation">
<?php wp_nav_menu(array('menu' => 'Main')); ?>
</div><!-- #access -->

And all I get is this

enter image description here

This is the CSS for my #access menu

#access {
    background: url(http://www.fhlsociety.ca/img/FHL-extras.jpg) no-repeat;
    background-position: 0px -236px;
    display: block;
    margin: 0 auto;
    width: 940px;
    height: 100px;
    padding-left: 30px;
    text-transform: uppercase;
    margin-bottom: 20px;

#access .menu-header,
div.menu {
    font-size: 1.2em;
    margin-left: 30px;
    width: 900px;
    height: 60px;

#access a {
    color: #aaa;
    display: block;
    line-height: 100px;
    padding: 0 10px;
    text-decoration: none;

#access a:hover {
    color: #fff;

#access ul ul a {
    background: #f3f3f3;
    line-height: 1em;
    padding: 10px;
    width: 160px;
    height: auto;
    margin-top: 30px;

#access li:hover > a,
#access ul ul :hover > a {
    color: #333;
    background: none;
#access ul li:hover > ul {
    display: block;

/*#access li:hover > a,
#access ul ul :hover > a {
    background-color: #990000;
    border-radius: 5px 5px 5px 5px;
    color: #C7BD89;
    margin: 0 auto;
    height: 20px;
    padding: 8px 17px;
#access ul li:hover > ul {
    display: block;

#access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a {
    color: red;

What else am I missing? Or why might my styling not be there anymore? Any help is appreciated!


You were missing an element container_class Try this -

<div id="access" role="navigation">
     <?php wp_nav_menu( array ( 'container_class' => 'menu-header', 'menu' => 'Main' ) ); ?>
</div><!-- #access -->
  • Hmmm..I remember trying something like that out last night when I was diagnosing it however it didn't work, I must of done it wrong. Is this is new hook in wordpress? I haven't been doing wordpress too long now but I don't remember having to put this hook in before. I just want to understand what I should do for next time, you know? And thanks!! – kia4567 Aug 9 '12 at 18:41
  • List of Parameters you can use with wp_nav_menu. – amit Aug 9 '12 at 18:44
  • It ads 'menu-header' class to ul element for styling. – amit Aug 9 '12 at 18:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.