Bootstrap navbar toggle not in sync with dropdown menu

Question

I made my own hamburger animation based of of this codepen: http://codepen.io/dalton/pen/YXZGry

As I prefer the animation to be a bit slow I set:

  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;

It works fine, ie I have a hamburger button, when I toggle I get the single - shaped button and the navbar dropdown menu appears; So hamburger when collapsed, - button when dropdown menu visible. However when I toggle twice fast the navbar dropdown menu appears and stays but the button toggles back to a hamburger (so button 'is out of sync' now). Desired behavior is to have always hamburger when collapsed and - button when not collapsed. How can I solve this?

Here is the fiddle: https://jsfiddle.net/musicformellons/w75b4rdf/6/

Make sure to quickly double press the lines of the hamburger (somehow in this fiddle the button edges behaves 'separate' from the hamburger...?!).

Answer 1

Try this code, it will add class only when your menu is opening and remove it only when it is hiding. Hope it helps.

$(document).ready(function () {
    $('#navbar').on('show.bs.collapse', function () {
        $('#nav-icon4').addClass('open');
    });
    $('#navbar').on('hide.bs.collapse', function () {
        $('#nav-icon4').removeClass('open');
    });
});

Answer 2

It can be controlled using a click tracker on the hamburger menu button. set data-clicked = 0 to your button and increment it on each click. The magic part is you have to disable any change on certain click tracker situations. Always do the hamburger menu transition when the tracker show integer 1 .

Html

<button class=".menuBtn">Menu Button</button>

Jquery

var btn = $('.menuBtn');
btn.click(function()) {
if ($(this).attr('data-clicked') == 0) {
    // toggle menu
}
else {
    // Do Nothing
}
}.promise().done(function(){btn.attr('data-clicked', 1)});