There is html markup of the adaptive menu:

<header> <input type="checkbox" id="nav_checkbox"> <nav role="navigation"> <div class="logo-box"> <h1 class="logo"><a href="#"> <img src="img/logo.png" /> </a></h1> </div> <label for="nav_checkbox" class="nav_button" data-open="МЕНЮ САЙТА" data-close="ЗАКРЫТЬ" onclick></label> <ul class="nav_menu"> <li><a href="#">Главная</a></li> <li><a href="#">Панельные бассейны</a></li> <li><a href="#">Продукция</a></li> <li><a href="#">Документация</a></li> <li><a href="#">Новости</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> </header>

css for him:

 @import url('https://fonts.googleapis.com/css?family=Cuprum'); body { margin: 0; font-family: 'Cuprum', sans-serif; } header { width: 100%; height: 100%; background-image: url('../img/nav_bg.png'); background-color: #0b7abf; background-repeat: no-repeat, no-repeat, no-repeat; background-position: center right; box-shadow: 0 4px 6px rgba(0,0,0,.2); } nav { max-width: 80%; margin: 0 auto; padding: 10px 0; overflow: hidden; } .logo-box { float: left; } .logo { margin: 0; height: 70px; text-align: center; } .nav_menu { margin: 0; padding-left: 0; list-style: none; float: right; height: 70px; line-height: 70px; text-align:center; } a { text-decoration: none; display: inline-block; position: relative; } .nav_menu li a { color: #ffffff; text-transform: uppercase; } .nav_menu li { display: inline-block; margin-left: 25px; transition: .5s linear; } .nav_menu li a:after { content: ""; width: 0; height: 2px; position: absolute; left: 0; bottom: 20px; background: #ffffff; transition: all 0.5s linear; } .nav_menu li a:hover:after{ width: 100%; } #nav_checkbox { /* чекбокс скрыт */ display: none; } @media screen and (max-width:1024px) { nav { overflow: visible; max-width: 90%; } .nav_menu { height: auto; line-height: 50px; display: none; padding: 0; margin: 0; float: none; } .nav_menu li { display: block; margin: 0; width: 100%; } .nav_menu li:hover { background: rgba(0,0,0,.1) } .nav_menu li a:after { content: none; } .nav_button { margin: 0; padding: 0; float: none; height: 100%; line-height: 70px; text-align:right; cursor: pointer; color: #fff; } .nav_button:after { /* получаем данные из атрибута data-open в html */ content: attr(data-open); display: block; margin: 0px; padding: 0px; } #nav_checkbox:checked + nav[role="navigation"] .nav_menu { /* когда чекбокс активен меню становится видимым */ display: block; } #nav_checkbox:checked + nav[role="navigation"] .nav_button:after { content: attr(data-close); } }

In all browsers, the menu is opened when clicking on the "site menu", but in Opera 57, version is not. How can I fix the situation?

    0