Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress From Bootstrap to WordPress Setup a Bootstrap Theme Creating Bootstrap Navigation in WordPress

Jonathan Bai
PLUS
Jonathan Bai
Courses Plus Student 8,181 Points

Nav Bar Class not being added

Hey Guys,

I've followed all details through this process Zach showed.

Here is My code of Header.php <body <?php body_class(); ?>>

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?php bloginfo('url'); ?>"><?php bloginfo( 'name' ); ?></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">

      <?php 
        $args = array (
            'menu_id'       => 'menu-main-menu-container',
            'menu_class' => 'nav navbar-nav',
            'container'  => 'false'
         );
        wp_nav_menu('$args');
      ?>

    </div><!--/.navbar-collapse -->
  </div>
</nav>

And here is my code of functions.php

<?php
function theme_js() {

    global $wp_scripts;

    wp_register_script('html5_shiv', 'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js', '', '', false );
    wp_register_script('respond_js', 'https://oss.maxcdn.com/respond/1.4.2/respond.min.js', '', '', false );

    $wp_scripts->add_data('html5_shiv', 'conditional', 'lt IE 9');
    $wp_scripts->add_data('respond_js', 'conditional', 'lt IE 9');

    wp_enqueue_script('boostrap_js', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), '', true );

}
add_action('wp_enqueue_scripts', 'theme_js');

add_theme_support( 'menus' );

function register_theme_menus() {
   register_nav_menus(
        array(
            'header-menu' => __( 'Header Menu' )
        )
    );
}
add_action( 'init' , 'register_theme_menus' );

?>

Maybe this is TL;DR but I really don't know why the class is not being added in menu.

Can you share the output you see when the menu is generated? The menu_class is applied to the ul element which encloses the menu items, if we can see the output we can better troubleshoot the issue.

9 Answers

Need to see the source code, the class would be applied in the HTML.

Jonathan Bai
PLUS
Jonathan Bai
Courses Plus Student 8,181 Points

Hey Mikes02,

THe html class in not applied. I've checked it before.

<body class="home page page-id-4 page-template-default">

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://localhost:8888/localwp.com">FitnessCracia</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">

          <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-15"><a href="http://localhost:8888/localwp.com/">Home</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="http://localhost:8888/localwp.com/blog/">Blog</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://localhost:8888/localwp.com/examples/">Examples</a></li>
</ul></div>

From the WP Dashboard go to Appearance > Menus and make sure that you have the Header Menu properly assigned. With the register_nav_menus in your functions.php file you have created a location for that menu, but you need to assign your navigation menu to that location now.

Give that a try and it should solve it.

Can you share a screenshot of the menus page from the dashboard.

Instead of having Menu Name = Main Menu try Header Menu

OK, so after looking at this a bit more in depth let's try specifically passing in the menu name parameter to your $args array. Try:

<?php 
$args = array (
    'menu'       => 'Header Menu',
    'menu_id'    => 'menu-main-menu-container',
    'menu_class' => 'nav navbar-nav',
    'container'  => 'false'
);
wp_nav_menu('$args');
?>
Jonathan Bai
PLUS
Jonathan Bai
Courses Plus Student 8,181 Points

Hey Mike,

I've tried this, However What I did to confirm if this is a problem with me or any upgrade from wordpress. I've download zip files from this lesson and changed here. For my surprise, the changes were made after changing, maybe there is a problem in somewhere that I probably missing out there in code.

Thank you very much for your support Mikes02, I'll keep following instructions from this course and made some changes after learning all process using bootstrap, though.

I am glad to hear that you got it all worked out, you may be right, perhaps something was missing and the updated lesson files took care of it.