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 trialHope Tillman
848 PointsNavbar not collapsing since I updated to WordPress 4.3 (maybe that was a coincidence).
My navbar is not collapsing since I updated to WordPress 4.3 - maybe that was a coincidence but I am not sure how to fix the problem. My header.php and functions.php look like the lesson. The styling on the page seems to be gone. The website is at http://www.msoginc.org/msogwp
3 Answers
Brian Hayes
20,986 PointsNow, I've been working with Foundation 5 in a theme for the past couple weeks and I know there is a dropdown class that goes on the list item, as well as some specific markup and classes that go in the nested a
and ul
elements. I into the bootstrap documentation and grabbed their dropdown markup:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
When I used chrome dev tools to take a look at your outputted code I didnt see any of the required bootstrap classes and attributes in the menu markup. It seems the main li
element, its nested a
element, and the ul
element that contains the submenu all have classes and elements.
Check you're menu markup in your header.php
.
It is possible something in the update messed with your current markup considering one of the features in the new update had to do with WordPress menus. You can read their release notes here.
The part concerning the menu though:
"Menus can now be managed with the Customizer, which allows you to see "live" preview changes without changing your site for visitors until you are ready."
On a final note, I updated WordPress on the Treehouse Bootstrap theme I did when I went through the course and nothing broke in the menu.
my header.php
looks like this:
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico">
<title>
<?php wp_title( '|', true, 'right' ); ?>
<?php bloginfo( 'name' ); ?>
</title>
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> data-pinterest-extension-installed="cr1.37">
<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' => 'header-menu',
'menu_class' => 'nav navbar-nav',
'container' => 'false'
);
wp_nav_menu( $args );
?>
</div><!--/.navbar-collapse -->
</div>
</nav>
So you need to check your markup I'd say.
Hope Tillman
848 PointsI found a line in the functions.php which didn't make sense and when I edited it, all was right with the world. I had done the same bootstrap to wordpress for two different sites, and the functions pages were somehow different now. Anyway, that is fixed.
Thank you.
Brian Hayes
20,986 PointsGlad to hear you found the error and everything's working now.
Arseniy Simpson
661 PointsHi, So what was that line and how exactly you edited it?
Hope Tillman
848 PointsThe error was a line in my functions.php file that did not belong. I'm not sure why it was there and I must have done it to myself. The main.css line had been moved lower in the functions.php file than it should have been and so was not being called.
Hope Tillman
848 PointsHope Tillman
848 PointsMy header.php looks just like yours except for two lines: I don't have the script statement for ie-emulation-modes-warning.js and my body statement is just an empty body class -- just slightly different from yours
I'll see what I can find in the Release Notes and in Customizer. If others aren't having this problem, there must be something I've done.
Thank you.