CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Zak Nichols
Zak Nichols

Reputation: 21

jQuery on click slide toggle works in mobile, but breaks when brought back to desktop

Here's my html and jquery code. It works great on mobile, but when brought back to desktop breaks the navbar. Any ideas? I'm using bulma.io

HTML

 <span class="nav-toggle">
     <span></span>
     <span></span>
  <span></span>
 </span>

  <!-- This "nav-menu" is hidden on mobile -->
  <!-- Add the modifier "is-active" to display it on mobile -->
  <div class="nav-right nav-menu">
    <a class="nav-item">
      Home
    </a>
    <a class="nav-item">
      Documentation
    </a>
    <a class="nav-item">
      Blog
    </a>

Javasciprt

$(document).ready(function(){
    $(".nav-toggle").click(function(){
        $(".nav-menu").slideToggle("slow");
    });
});

CSS

@media screen and (min-width: 769px), print {
   .nav-toggle {
    display: none;
  }
}

Upvotes: 1

Views: 548

Answers (2)

Ismail Farooq
Ismail Farooq

Reputation: 6827

Reset your script on resize this will fix your issue

$(window).resize(function() {
    $(".nav-menu").removeAttr("style");
});

Upvotes: 2

Stu Furlong
Stu Furlong

Reputation: 3629

If you hide the menu at mobile using slide toggle, what happens is the jQuery is adding a display:none inline on the nav menu.

A quick and dirty fix would be a CSS change:

@media screen and (min-width: 769px), print {
   .nav-toggle {
    display: none;
  }
  .nav-menu { display:block !important; }
}

You could also do a more involved fix, which would be changing the class of the nav-menu on click and using css for the animation:

$(document).ready(function(){
    $(".nav-toggle").click(function(){
        var navMenu = $(".nav-menu");

        if(navMenu.hasClass('open')){
            navMenu.removeClass('open');
        } else {
            navMenu.addClass('open');
        }
    });
});

CSS

.nav-menu { max-height:0; opacity:0; transition:all .3s; }
.nav-memu.open { max-height:80em; opacity:1; }

@media(min-width:769px){
    .nav-menu { max-height:none; opacity:1; }
}

Issue with this approach is you might need to adjust max height depending on how long a menu can get.

Here's a fiddle

Upvotes: 2

Related Questions