My solution for toggling the sidebar visibility on mobile and tablet devices using CSS3 checkboxes is working perfectly. However, I encountered an issue where resizing the browser window causes the sidebar to become unchecked, resulting in the navigation bar disappearing.
Although I attempted to recreate the error in a JSFiddle, the problem did not occur there. I have provided the code snippet and the link to the website, both of which utilize the same class and id names.
ul, li {
list-style-type:none;
}
.header__actions__menu {
display: inline-block;
font-size: .5625rem;
font-weight: bold;
}
.header__actions__menu span:before {
content: "X";
font-family: 'FontAwesome';
font-weight: normal;
position: absolute;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
font-style: normal;
font-size: .875rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header__actions__menu span {
background-color: #fff;
border: 2px solid #000;
display: block;
margin: 0 auto 3px;
position: relative;
height: 20px;
width: 22px;
}
.header__actions__close {
opacity: 0;
position: absolute;
transition: opacity .1s linear 1s;
visibility: hidden;
}
.header__actions__close {
background-color: #000;
border-radius: 100%;
display: inline-block;
overflow: hidden;
position: relative;
height: 22px;
width: 22px;
text-indent: -9999px;
}
.header__actions__close:before, .header__actions__close:after {
opacity: 0;
transition: opacity .1s linear .2s;
visibility: hidden;
}
.header__actions__close:before, .header__actions__close:after {
background-color: #fff;
content: '';
left: 50%;
position: absolute;
height: 2px;
width: 14px;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
.header__actions__close:after {
transform: translate(-50%, -50%) rotate(-45deg);
}
/*-- Checked CSS --*/
#mobile-nav:checked ~ .header__actions .header__actions__menu, #mobile-nav:checked ~ .header__actions .header__actions__phone {
display: none;
}
#mobile-nav:checked ~ .header__actions .header__actions__close {
display: inline-block;
opacity: 1;
position: relative;
visibility: visible;
}
#mobile-nav:checked ~ .header__actions .header__actions__close:before, #mobile-nav:checked ~ .header__actions .header__actions__close:after {
opacity: 1;
position: absolute;
visibility: visible;
}
/*-- Breakpoints --*/
@media only screen and (max-width: 991px) {
.header__actions li:last-child {
margin-left: auto;
}<input type="checkbox" style="display: block;" id="mobile-nav">
<div class="header__actions" data-section="header-account-actions">
<ul>
<li>
<label for="mobile-nav" class="header__actions__menu">
<span></span>
Menu
</label>
<label for="mobile-nav" class="header__actions__close">Close</label>
</li>
</ul>
</div>Website : (Mobile version only)