Mobile Navigation Menu not working (HTML, CSS & JQuery)

Question

I am attempting to make a mobile navigation menu based off of this example: Basic Hamburger Menu

However, for what ever reason it does not work. When I click on the button nothing happens except rotating the 3-line graphic. The menu does not expand / appear.

When troubleshooting I have found out that if .mobile is site for display:block; instead of display:none; when the page loads, the javascript works for collapsing / hiding the menu, and making it reappear. Only the rotation of the 3-line graphic is opposite of what it should be. So, I know the javascript is working.

I just can't understand why it doesn't work with the nav hidden by default like in the example. I have played around with it for more then 3 hours so far and have gotten nowhere. There for I"m attempting to post it here to see if anyone might have any idea as to what might be going on as I am at a complete loss and about ready to wave the white flag.

This is the javascript on my page:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $('button').click(function () { $(this).toggleClass('expanded').siblings('div').slideToggle(); }); //@ sourceURL=pen.js </script> 

And the HTML / CSS is the same as the example except I have modified it so all the links are built into a UL.

HTML Code:

 <div id="main_container"> <header> <img src="<?php echo get_template_directory_uri(); ?>/assets/header3.jpg" alt"logo" width="100%"> </header> <nav> <div id="desktop_nav"><?php wp_nav_menu( $args ); ?></div> </nav> <nav> <div id="mobile_nav" class="mobile"> <button>Toggle</button> <div> <?php wp_nav_menu( $args ); ?> </div> </div> </nav> 

And CSS Code:

 #mobile_nav ul { display: table; width: 100%; /*table-layout:fixed;*/ } .mobile { display:none; position:relative; width:100%; min-height:50px; } .mobile div { display:none; } .mobile button { position:absolute; top:10px; left: 10px; border:0; text-indent:200%; overflow:hidden; background:#363636 url(assets/menu.png) center no-repeat; border-radius:3px; background-size:80%; width:30px; height:30px; outline:none; transition:all 400ms ease; -webkit-transition:all 400ms ease; transition:all 400ms ease; } .mobile button.expanded { -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); border:0; } .mobile ul li a { display: block; background: #000; text-align: center; padding: 20px 0; border-bottom: 1px solid #363636; text-decoration: none; color: white; width: auto; } .mobile ul li:last-child { border-bottom: none; display: table-cell; } .mobile ul li a:hover, .mobile ul li a:active, .mobile ul li a:focus { background: #363636; width: 100%; } @media (max-width: 800px) { .mobile { display:block; } .mobile div {display:block} #desktop_nav { display:none; } } 

Thanks

Answer 1

Adding a class to the div called "toggle" and changing the format of the javascript to the following solved the issue.

 <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('button').click(function(){ jQuery(this).toggleClass('expanded'); jQuery(".toggle").slideToggle(); }); }); </script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>