Hamburger button transit to X button, but won't return as hamburger button when refreshed

Question

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; }

Did you click the hamburger button once then click the refresh button? — Daniel Saavedra
– Daniel Saavedra, Commented Sep 14, 2016 at 20:11
Yep. I'm on Google Chrome by the way. Maybe it's the browsers cache? Ctrl+F5 might just work. — Flink
– Flink, Commented Sep 14, 2016 at 20:15
Oh ok, I use Firefox. Can you confirm this if you are running Firefox browser? — Daniel Saavedra
– Daniel Saavedra, Commented Sep 14, 2016 at 20:18

Community · Accepted Answer · 2017-05-23 11:51:41Z

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.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Sep 14, 2016 at 20:27

Flink

1,0071 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Daniel Saavedra Over a year ago

Added webkit and it didn't work. Also, I decided to add moz, however no luck.

Daniel Saavedra Over a year ago

Thank you so much! It works! I never thought Firefox had an aggressive cache-control.

Flink Over a year ago

Glad I could help :)

Collectives™ on Stack Overflow

Hamburger button transit to X button, but won't return as hamburger button when refreshed

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related