0

Why when a person clicked on the hamburger button that transit to X button and decided to refresh and the X button remains? How do you get the hamburger button to appear again after refreshing the site?

Here is the link to my website: http://dannysaavedra.com/photobeta

Here is the code for my hamburger button and X button in CSS.

This only occur in Firefox browser.

/*Begin Hamburger Menu*/
#menu {
  position: fixed;
  top:17px;
  right: 20px;
  height: 28px;
  width: 35px;
  cursor: pointer;
  z-index: 7;
}

.nav-trigger {
  cursor: pointer;
  clip: rect(0, 0, 0, 0);
  position: fixed;
}

label {
  position: absolute;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

#menuButton,
#menuButton:before,
#menuButton:after {
  cursor: pointer;
  position: fixed;
  top: 30px;
  right: 20px;
  z-index: 2;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background-color: white;
  content: '';
}

.nav-trigger:checked + #menuButton:before,
.nav-trigger:checked + #menuButton:after {
  top: 30px;
  right:20px;
  background-color: red;
}

#menuButton:before {
  top: 20px;
}

#menuButton:after {
  top: 40px;
}

.nav-trigger:checked + #menuButton:after {
  transform: rotate(-45deg);
}

.nav-trigger:checked + #menuButton {
  background-color: transparent;
}

.nav-trigger:checked + #menuButton:before {
  transform: rotate(45deg);
}

.nav-trigger + #menuButton:before,
.nav-trigger + #menuButton:after {
  transition: all 200ms ease-in-out;
}

.nav-trigger:checked + #menuButton:before,
.nav-trigger:checked + #menuButton:after {
  transition: all 200ms ease-in-out;
}

.nav-trigger + #menuButton,
.site-wrap {
  transition: left 0.2s;
}

.nav-trigger + #menuButton {
  right: 20px;
  transition: right 0.2s;
  transition: all 10ms ease-in-out;
}

.nav-trigger:checked ~ .site-wrap {
  left: -300px;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
  transition: left 0.2s;
}
Daniel Saavedra
  • 47
  • 6

1 Answers1

1

EDIT: It seems the :checked is not resetting in Firefox. I found a similar topic, which suggests adding autocomplete="off" to the given element. Find the topic here.

OLD: Try adding -webkit-transition to all your transitions, like so:

-webkit-transition: someTransition;
transition: someTransition;

The same is true for transform.

Community
  • 1
  • 1
Flink
  • 1,008
  • 1
  • 13
  • 23