I made one menu "( https://www.mobila.name/post/53eb5a219dcff/ )" and everything works fine. Then he created another similar menu and wrapped them both into a div class left-cb and right-sb. Naturally, simultaneously creating two files in the sass folder and connecting them to the general sass (@import 'Left-SB.sass' and @import 'Right-SB.sass'). And ... what do we do? And nothing! the left menu and its burger works and the right one does not. An indication that the right menu is connected is that there is another burger on the right side of the screen and the menu itself is broken. But no, a broken menu is another half of the problem if it was managed by your burger (as you already understood, it is not controlled at all). And the main problem is that this right burger opens and closes the left menu and the right one at least henna. How to make the burger open the right menu, and its menu was displayed not broken but correctly (just like the left one)?
.left-sb { width: 25%; float: left; } .left-sb .hidden-menu-ticker { display: none; } .left-sb .btn-menu-l { color: #fff; background-color: #666; padding: 5px; position: fixed; top: 50px; left: 351px; cursor: pointer; transition: left .23s; z-index: 3; width: 25px; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .left-sb .btn-menu-l span { display: block; height: 5px; width: 30px; background-color: #fff; margin: 3px 0 0 -3px; transition: all .1s linear .23s; position: relative; } .left-sb .btn-menu-l span.firsts { margin-top: 0; } .left-sb .hidden-menu-ticker-l:checked ~ .btn-menu-l { left: 360px; top: 50px; } .left-sb .hidden-menu-ticker-l:checked ~ .hidden-menu-l { left: 0; } .left-sb .hidden-menu-ticker-l:checked ~ .btn-menu-l span.first-l { -webkit-transform: rotate(45deg); top: 10px; } .left-sb .hidden-menu-ticker-l:checked ~ .btn-menu-l span.second-l { opacity: 0; } .left-sb .hidden-menu-ticker-l:checked ~ .btn-menu-l span.third-l { -webkit-transform: rotate(-45deg); top: -10px; } .left-sb .hidden-menu-l { display: block; position: fixed; list-style: none; padding: 10px; margin: 0; box-sizing: border-box; width: 360px; background-color: #eee; height: 100%; top: 0; left: -360px; transition: left .2s; z-index: 2; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .right-sb { width: 25%; float: right; } .right-sb .hidden-menu-ticker-r { display: none; } .right-sb .btn-menu-r { color: #fff; background-color: #666; padding: 5px; position: fixed; top: 50px; right: 351px; cursor: pointer; transition: right .23s; z-index: 3; width: 25px; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .right-sb .btn-menu-r span { display: block; height: 5px; width: 30px; background-color: #fff; margin: 3px 0 0 -3px; transition: all .1s linear .23s; position: relative; } .right-sb .btn-menu-r span.first { margin-top: 0; } .right-sb .hidden-menu-ticker-r:checked ~ .btn-menu-r { right: 360px; top: 50px; } .right-sb .hidden-menu-ticker-r:checked ~ .hidden-menu-r { right: 0; } .right-sb .hidden-menu-ticker-r:checked ~ .btn-menu-r span.first-r { -webkit-transform: rotate(45deg); top: 10px; } .right-sb .hidden-menu-ticker-r:checked ~ .btn-menu-r span.second-r { opacity: 0; } .right-sb .hidden-menu-ticker-r:checked ~ .btn-menu-r span.third-r { -webkit-transform: rotate(-45deg); top: -10px; } .right-sb .hidden-menu-r { display: block; position: fixed; list-style: none; padding: 10px; margin: 0; box-sizing: border-box; width: 360px; background-color: #eee; height: 100%; top: 0; right: -360px; transition: right .2s; z-index: 2; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } * { border: 1px solid #000; } body, html { height: 100%; margin: 0; font-family: helvetica; font-weight: 100; } .container { background-color: pink; max-width: 1170px; padding: 0 15px; margin: 0 auto; position: relative; height: 100%; width: 100%; } header { background-color: #d0f; } main { display: block; position: relative; height: 800px; background-color: #e00; } main .button-RN { position: absolute; top: 50px; right: 120px; width: 30px; height: 80px; } main #leftNav { position: fixed; top: 75px; left: 0; width: 25%; height: 500px; } main #leftNav .my-menu ul li { text-align: center; text-decoration: none; list-style: none; } main .button-LN { position: absolute; top: 50px; left: 120px; width: 30px; height: 80px; } main #rightNav { position: fixed; top: 75px; right: 0; width: 25%; height: 500px; } main #rightNav .my-menu ul li { text-align: center; text-decoration: none; list-style: none; } footer { background-color: #d0f; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <link rel="stylesheet" href="css/libs.min.css"> <link rel="stylesheet" href="css/main.css"> <!-- <script type="text/javascript">//<![CDATA[ $(window).load(function(){ $("[data-toggle]").click(function() { var toggle_el = $(this).data("toggle"); $(toggle_el).toggleClass("open-sidebar"); }); });//]]> </script> --> </head> <body> <header> header </header> <main> <div class="left-sb"> <input type="checkbox" id="hmt" class="hidden-menu-ticker-l"> <label class="btn-menu-l" for="hmt"> <span class="first-l"></span> <span class="second-l"></span> <span class="third-l"></span> </label> <ul class="hidden-menu-l"> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> </ul> </div> <div class="right-sb"> <input type="checkbox" id="hmt" class="hidden-menu-ticker-r"> <label class="btn-menu-r" for="hmt"> <span class="first-r"></span> <span class="second-r"></span> <span class="third-r"></span> </label> <ul class="hidden-menu-R"> <li><a href="">Link 1</a></li> <li><a href="">Link 2</a></li> <li><a href="">Link 3</a></li> </ul> </div> <!-- <div class="conta left-sb"> <div id="sidebar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Explore</a></li> <li><a href="#">Users</a></li> <li><a href="#">Sign Out</a></li> </ul> </div> <div class="main-content"> <a href="#" data-toggle=".container" id="sidebar-toggle"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </a> </div> </div> --> <div id="content" class="container"> section </div> <!-- <button class="button-RN" onclick="OnOffRightNav()">tytdrsf</button> <div id="leftNav"> <button class="button-LN" onclick="OnOffLeftNav()">kljkljlk</button> <nav class="my-menu"> <ul> <li><a href="#"></a></li> <li class="active"><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </nav> </div> <div id="rightNav"> <nav class="my-menu"> <ul> <li><a href="#"></a></li> <li class="active"><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> --> </main> <footer> footer </footer> <script src="js/libs.min.js"></script> <script src="js/common.js"></script> <script src="js/jquery.js"></script> </body> </html> 
