Bootstrap menu animation 'x' ne pas basculer pour réinitialiser

Question

J'ai un problème simple à résoudre, essayé de le résoudre depuis 2 jours de suite, la recherche de réponse sans succès. Le problème est bouton navbar-bascule (bouton de menu bootstrap dans la fenêtre de taille mobile) l'animation lorsque vous cliquez sur le bouton fonctionne correctement, mais, lorsque j'essaie de fermer le menu avec le bouton navbar-toggle (x) lorsqu'il est ouvert, le (x) dans le bouton ne se réinitialise pas pour tourner (0) dans le fichier css.

Exemple de travail Menu bootstrap bouton d'animation http://iwebdesign.se/bare/

Mon bouton avec le problème http://iwebdesign.se/

Je ne sais pas où le problème pourrait être si celui-ci je ne coller un code ici.

Answer 1

C'est parce que le bouton reste l'élément focalisé.

EDIT: Je pense que cette partie fait-il pas revenir à la normale:

header .navbar-iwebdesign .navbar-toggle:focus .top-bar 
    { 
    -webkit-transform: rotate(45deg); 
    -webkit-transform-origin: 15% 85%; /* chrome */ 
    -webkit-transition: all 0.35s ease-in-out; 
    } 
header .navbar-iwebdesign .navbar-toggle:focus .middle-bar-transition-new 
    { 
    -webkit-transform: rotate(45deg); 
    -webkit-transform-origin: 10.5px -1.5px; /* chrome */ 
    -webkit-transition: all 0.25s ease-in-out; 
    opacity: 0.5; 
    } 

header .navbar-iwebdesign .navbar-toggle:focus .bottom-bar 
    { 
    -webkit-transform: rotate(-45deg); 
    -webkit-transform-origin: 11% 10%; /* chrome */ 
    -webkit-transition: all 0.35s ease-in-out; 
    } 

Si je vous, j'utiliseraient jQuery pour basculer d'une classe à la place.

EDIT: ajouter ceci à vos menu.js:

$('.navbar-toggle').on('click', function() { 
    $(this).toggleClass('collapsed'); 
}); 

et modifier les sélecteurs ci-dessus dans animation.css à:

header .navbar-iwebdesign .navbar-toggle.collapsed .top-bar 
header .navbar-iwebdesign .navbar-toggle.collapsed .middle-bar-transition-new 
header .navbar-iwebdesign .navbar-toggle.collapsed .bottom-bar