CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5726628
user5726628

Reputation:

Responsive dropdown navigation issue

I am creating a dropdown navigation for a project. Once the device width reaches 768px the menu becomes hidden, and the user can click on an icon to see the links. However, once the user has scrolled up or down the webpage the navigation disappears suddenly. How can I fix this. I have provided the jQuery code below.

$(document).ready(function(){

 function checkNav() {
  if($(document).width() > 768) {
   $('#navigation ul').show();
  };
  if($(document).width() < 768) {
   $('#navigation ul').hide();
  };
 }
 checkNav();
 $(window).resize(function(){
  checkNav();
 });
 $('.mobile-menu').click(function(){
  $('#navigation ul').stop().slideToggle();
 });

});

Thanks!

Upvotes: 0

Views: 48

Answers (1)

ab29007
ab29007

Reputation: 7756

You need to do this using css

Suppose your dropdown has class="mobile-menu" then add this to your css

.mobile-menu{
    position:absolute;
    left:0;
    top:0;
}

This will make your menu always stick to top-left.

If instead of left:0; you do right:0; then menu will stick to top-right.

Upvotes: 1

Related Questions