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

JavaScript

Abe Layee
Abe Layee
8,378 Points
Posted by Abe Layee
Abe Layee
8,378 Points

Help me please with my code.

I have been struggle to figure out this bug for hours now and yet, I can't see what I am doing wrong. Why the windows hit 480px, my nav element doesn't not show or it hides the menu.I think it might be my css where the bug is coming from. I If you don't mind sharing tips and telling me why my menu is not working properly on mobile view, I'll really appreciate. Thank you in advance. Here is my CodePen and Jquery file below. http://codepen.io/Layee/pen/YXGpZR

$(document).ready(function(){

       $('.menu-trigger').click(function(){

           $('.nav').slideToggle(400,function(){

              $(this).toggleClass('nav-expanded').css('display','');

           });

       });


});

1 Answer

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

You were toggling the wrong element. According to your media query it is .nav ul li that is being set to display: none. You need to use that for the toggle.

Below is the fix:

Edit: I have updated the code to fix the resize to desktop issue. Some other checks needed to be made. :)

$(document).ready(function() {

  $(window).resize(function() {
    if ($(this).width() > 480) {
      $('.nav ul li').removeClass('nav-expanded').css('display', 'inline-block');
    } else {
      $('.nav ul li').css('display', 'none');
    }  
  });

  $('.menu-trigger').click(function() {
    if ($(window).width() <= 480 && $('.menu-trigger').is(':visible')) {
      $('.nav ul li').slideToggle(400, function() {
        $(this).toggleClass('nav-expanded');
      });
    }
  });
});

p.s. Great text-shadow work on your header. :-)

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thank you and I ran into another bug. My nav is not showing for desktop after mobile view.

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

I updated my op to include the resize fix.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Thank you a lot bro. I am going to look up some of the Jquery used in this code and hope to learn from it.