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

Posted by Pierre Goasdoue
Pierre Goasdoue
5,039 Points

Can't display menu navbar navigation

First of all sorry if some of my sentences are bad, I'm french ;)

So, I'm working locally on making a wordpress theme with an already crafted bootstrap theme, I give you the link to it so you can give it a look

http://www.blacktie.co/demo/studio/

I'm actually trying to code the main menu of the site (the toggled bar on the right hand side) and I followed the "Creating Bootstrap Navigation in WordPress" to do so. But I can't show any content, and the button to open this navbar doesn't seem to work. But when I see the source code of the page all of the content is loaded.

This is how the menu looks like in the original HTML5 bootstrap theme

<!-- Menu -->
    <nav class="menu" id="theMenu">
        <div class="menu-wrap">
            <h1 class="logo"><a href="index.html#home">DSGN NYC</a></h1>
            <i class="fa fa-times menu-close"></i>
            <a href="#home" class="smoothScroll">Home</a>
            <a href="#about" class="smoothScroll">About</a>
            <a href="#portfolio" class="smoothScroll">Portfolio</a>
            <a href="#services" class="smoothScroll">Services</a>
            <a href="#contact" class="smoothScroll">Contact</a>
            <a href="#"><i class="fa fa-facebook"></i></a>
            <a href="#"><i class="fa fa-twitter"></i></a>
            <a href="#"><i class="fa fa-dribbble"></i></a>
            <a href="#"><i class="fa fa-envelope"></i></a>
        </div>

        <!-- Menu button -->
        <div id="menuToggle"><i class="fa fa-bars"></i></div>
    </nav>

This is the menu section in my functions.php file

 add_theme_support('menus');

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

And the header.php file where the menu should be loaded (I'm not sure about the parameters of the wp_nav_menu() function

  <!-- Menu --> 
  <nav class="menu" id="theMenu">

    <?php 
      $args = array(
        'menu'       => 'theMenu',
        'menu_class' => 'menu-wrap',
        'container'  => 'nav',
        'container_class' => 'menu',
        'container_id' => 'theMenu',


      );
      wp_nav_menu($args);
     ?>

    <!-- Menu button -->
    <div id="menuToggle"><i class="fa fa-bars"></i></div>
  </nav>

In the wordpress dashboard (at appearance/menu) I did create a new menu and place the elements in it with the right links.

Thanks in advance !

3 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Does your JavaScript all show up properly in the source code of the site as well? This sounds like the JS isn't working.

Pierre Goasdoue
Pierre Goasdoue
5,039 Points

Thanks for your answer Zac, all the JavaScript files show up properly in the source code

I verified the main Javascript file too, I give you the code 

;(function(){

            // Menu settings
            jQuery('#menuToggle, .menu-close').on('click', function(){
                jQuery('#menuToggle').toggleClass('active');
                jQuery('body').toggleClass('body-push-toleft');
                jQuery('#theMenu').toggleClass('menu-open');
            });



})(jQuery)

The classes mentionned in the function are all on the style.css file, except #theMenu id, which is not in the original theme's style.css file neither. When I stylise this Id like this : 

#theMenu {
    background-color: #2f2f2f;
    height: 100%;
    width: 500px;
}

The menu shows up and the links work (without the smoothscroll animation) but the button still doesn't work, I can't hide and show the menu

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Do you have a live link somewhere? Still sounds like a JS error

Pierre Goasdoue
Pierre Goasdoue
5,039 Points
Pierre Goasdoue
Pierre Goasdoue
5,039 Points

Yes, I just uploaded the theme online so you can give it a look, I give you the link: http://magicfocus.fr/