<div class="navbar"> <div class="navbar-inner main-container"> <a class="brand" href="#"><img src="img/logo-text.svg" alt=""></a> <ul class="nav"> <li class="menu-li active hidden-sm hidden-xs"> <ul class="menu"> <li class="active"><a href="">Sign Up</a></li> <li class=""><a href="">Sign In</a></li> </ul> </li> <li class="hidden-md hidden-lg" id="mobile-menu-but"> <span class="hamburger"></span> <span class="hamburger"></span> <span class="hamburger"></span> </li> </ul> </div> </div> There is such a menu. I need the mobile version of the item:
<ul class="menu"> <li class="active"><a href="">Sign Up</a></li> <li class=""><a href="">Sign In</a></li> </ul> It was completely full screen. For this, I have the following elements: menu-li, nav, navbar-inner, navbar in the mobile version I prescribe position: static , everything turns out and the menu released, but there is a glitch, because all the elements in the nav element will also pop out for the parent. How can this be solved, or tell the library that would solve it. Thank!
.navbar { border-bottom: 2px solid @red1; border-top: none; border-right: none; border-left: none; background-color: #ffffff; -webkit-border-radius: 0px; border-radius: 0px; margin: 0; z-index: 50; } .navbar-inner { position: relative; } .main-container { max-width: 1225px; position: relative; margin: 0 auto; padding-left: 50px; padding-right: 50px; } .container-content { max-width: 660px; margin: 0 auto; padding-top: 49px; padding-bottom: 100px; } .full-width { position: relative; width: 100%; overflow: hidden; } .full-width-bg { //height: 100%; background-image: url('../img/signup-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; padding-top: 132px; padding-bottom: 144px; } .full-width-bg-merch { padding-top: 91px; padding-bottom: 51px; } .brand { display: inline-block; padding-top: 14px; padding-bottom: 18px; } .footer-bottom { position: absolute; bottom: 0; left: 0; right: 0; } .brand img { width: 100px; height: 50px; display: inline-block; } .nav { position: absolute; right: 50px; top: 0; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .nav > li > a:hover { background-color: transparent; } .nav > li { color: @red1; font-family: Lato, sans-serif; font-size: 16px; font-weight: 800; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .nav > li a { padding-left: 32px; padding-right: 32px; } .hamburger { background-color: @red1; height: 4px; width: 35px; margin-bottom: 5px; } .nav > #mobile-menu-but { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; border-left: 1px solid @border1; padding-left: 25px; padding-right: 0; cursor: pointer; } .menu { height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; li { display: inline-block; height: 100%; } a { display: block; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .menu .active { color: #fff; background-color: @red1; }