Мобильная версияЭлементы мобильной навигации не закрываются ⇐ CSS
-
Anonymous
Элементы мобильной навигации не закрываются
Probably one of the worst things I could be doing but I've taken a snippet of code from codepen that I really liked for my new bootstrap 5 site that animates a burger menu usgin CSS. It opens the nav items fine on mobile view, but then I can't get it to close. Not sure what I have to do to get it to close the items? I assume it's because I'm not toggling a close option but not sure how to write it properly. Any help would be greatly appreciated. Thanks!
MHARRISONDESIGN CSS:
/*Nav overrides*/ .navbar{background-color:transparent!important;} .navbar a{color:white;} .navbar a:hover{color:#c08cf1;} .navbar-brand{color:#FFF; font-size:1.6rem;} .navbar-collapse{flex-grow:0;} .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(192,140,241, 0.5)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } .navbar-toggler { border:none; display:contents; } /*Animated burger menu STARTS*/ .ham { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .hamRotate.active { transform: rotate(45deg); } .hamRotate180.active { transform: rotate(180deg); } .line { fill:none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke:#c08cf1; stroke-width:5.5; stroke-linecap:round; } .ham1 .top { stroke-dasharray: 40 139; } .ham1 .bottom { stroke-dasharray: 40 180; } .ham1.active .top { stroke-dashoffset: -98px; } .ham1.active .bottom { stroke-dashoffset: -138px; } /*Animated burger menu ENDS*/
Источник: https://stackoverflow.com/questions/780 ... g-to-close
Probably one of the worst things I could be doing but I've taken a snippet of code from codepen that I really liked for my new bootstrap 5 site that animates a burger menu usgin CSS. It opens the nav items fine on mobile view, but then I can't get it to close. Not sure what I have to do to get it to close the items? I assume it's because I'm not toggling a close option but not sure how to write it properly. Any help would be greatly appreciated. Thanks!
MHARRISONDESIGN CSS:
/*Nav overrides*/ .navbar{background-color:transparent!important;} .navbar a{color:white;} .navbar a:hover{color:#c08cf1;} .navbar-brand{color:#FFF; font-size:1.6rem;} .navbar-collapse{flex-grow:0;} .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(192,140,241, 0.5)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); } .navbar-toggler { border:none; display:contents; } /*Animated burger menu STARTS*/ .ham { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 400ms; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .hamRotate.active { transform: rotate(45deg); } .hamRotate180.active { transform: rotate(180deg); } .line { fill:none; transition: stroke-dasharray 400ms, stroke-dashoffset 400ms; stroke:#c08cf1; stroke-width:5.5; stroke-linecap:round; } .ham1 .top { stroke-dasharray: 40 139; } .ham1 .bottom { stroke-dasharray: 40 180; } .ham1.active .top { stroke-dashoffset: -98px; } .ham1.active .bottom { stroke-dashoffset: -138px; } /*Animated burger menu ENDS*/
Источник: https://stackoverflow.com/questions/780 ... g-to-close
