Responsive dropdown navigation issue

Question

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!

Answer 1

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.