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
Jonathan Bai
Courses Plus Student 8,181 PointsNav 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.
9 Answers
Jonathan Bai
Courses Plus Student 8,181 PointsHi Mikes02,
Here is the printscreen -> http://prntscr.com/8e2jfe
mikes02
Courses Plus Student 16,968 PointsNeed to see the source code, the class would be applied in the HTML.
Jonathan Bai
Courses Plus Student 8,181 PointsHey 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>
mikes02
Courses Plus Student 16,968 PointsFrom 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.
Jonathan Bai
Courses Plus Student 8,181 PointsIt is already marked.
mikes02
Courses Plus Student 16,968 PointsCan you share a screenshot of the menus page from the dashboard.
mikes02
Courses Plus Student 16,968 PointsInstead of having Menu Name = Main Menu try Header Menu
Jonathan Bai
Courses Plus Student 8,181 PointsIs there another option for it ?
mikes02
Courses Plus Student 16,968 PointsOK, 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
Courses Plus Student 8,181 PointsHey 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.
mikes02
Courses Plus Student 16,968 PointsI 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.
mikes02
Courses Plus Student 16,968 Pointsmikes02
Courses Plus Student 16,968 PointsCan 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.