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

Hope Tillman
Hope Tillman
848 Points
Posted by Hope Tillman
Hope Tillman
848 Points

Navbar 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
Brian Hayes
20,986 Points
Brian Hayes
Brian Hayes
20,986 Points

Now, 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
Hope Tillman
848 Points
Hope Tillman
Hope Tillman
848 Points

My 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.

Hope Tillman
Hope Tillman
848 Points
Hope Tillman
Hope Tillman
848 Points

I 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
Brian Hayes
20,986 Points
Brian Hayes
Brian Hayes
20,986 Points

Glad to hear you found the error and everything's working now.

Arseniy Simpson
Arseniy Simpson
661 Points

Hi, So what was that line and how exactly you edited it?

Hope Tillman
Hope Tillman
848 Points
Hope Tillman
Hope Tillman
848 Points

The 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.