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