lundi 20 avril 2015

Why isn't my transition working when I close my navigation?

I'm trying to make my navigation transition the width from 0% to 20% when you click the 'hamburger' icon. It works when I open the navigation, but not when I close it.

Here is some of the CSS

    .nav-toggle.active + nav {
width: 20%;
transition: all 500ms ease-in-out;
visibility:visible;
}

nav {
  height: 2em;
  width: 0%;
  line-height: 2em;
  position: absolute; 
  left: 5%; 
  top: 4.5%;
  background: rgba(144, 198, 149, 1);
  border-radius: 5px;
  text-align: center;
  visibility: hidden;
}

I've also tried the same thing without the 'visibility' property.

Here is the http://ift.tt/1blxaED with the hamburger icon, for more of a visual.

Aucun commentaire:

Enregistrer un commentaire