Question

I am trying to implement a javascript toggle effect for my “small” or mobile sized version of a responsive site. I am using my own custom WordPress theme.

I’m trying to use the script from this article: http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1

The tricky part is that I’m trying to include several divs, not just a single nav. If you look at the site now (which is still under construction), at:

http://66.147.244.81/~assureva/

and reduce your browser window to narrower than 540px, you’ll see that I’ve managed to get my top navbar (smallnav), 2 “login” links, and facebook and LinkedIn icons, all to disappear, and re-appear when pressing the “main menu” button that now appears at the top, to the right of the logo. But I can’t seem to add in the last part, which is the 4 links that comprise the main “nav”. I’ve wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn’t in that div, but the “smallnav”, “logins” and “socialcons” divs all combine as desired in the “mobimenubg” div.

If I go ahead and set the “navbar” div to “display:none” it will disappear but it won’t re-appear when I click the “main menu” button.

So I think the answer to ask the javascript to include the “mobimenubg” div AND the “navbar” div (the “navbar div is a container that includes the actual “nav”) but I don’t know how to write it properly.

Here’s the javascript:

<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
    $("#mobimenubg").slideToggle();
    $(this).toggleClass("active");
}); 
    }); 
   </script>

Can someone tell me how add the navbar div? Do I add another line after:

$("#mobimenubg").slideToggle();

or can I include it in the parens:

$("#mobimenubg" IN HERE?).slideToggle();

I don’t know the conventions –

Help greatly appreciated!!

Answer 1

I’ve wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn’t in that div,

You actually have the right code, but your HTML structure is off. The navbar div is not contained within the mobimenubg div, and that is the problem. Just make sure to nest navbar there, or otherwise I think you can also call the function on the navbar like:

$("#navbar").slideToggle();