html - show full page overlay while sub navigation is opened using css -
i wanted show overlay while sub menu opened using css, have tried below thing, it's doing trick not able nav links since overlay on top.
.header .navbar .nav .nav-item div.big-menu { position: absolute; display: block; opacity: 0; width: 100%; max-height: 450px; top: 80px; left: 0; z-index: 399; visibility: hidden; overflow: hidden; background: #ffffff; color: #181717; -webkit-transition: 0.3s ease 0.15s; transition: 0.3s ease 0.15s; } .header .navbar .nav .nav-item div.big-menu .big-menu-body { position: relative; overflow: hidden; background-color: white } .header .navbar .nav .nav-item:hover > div { opacity: 1; visibility: visible; overflow: visible; } /* used :after apply overlay */ .header .navbar .nav .nav-item:hover > div:before { content: ''; position: fixed; z-index: auto; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/> <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" integrity="sha384-xxxxxxxx" crossorigin="anonymous"></script> <body> <div class="header"> <div class="container"> <nav class="navbar navbar-light bg-faded"> <a class="navbar-brand" href="#">navbar</a> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">sub menu</a> <div class="big-menu"> <div class="big-menu-body bg-img-2"> <div class="row big-menu-container"> <div class="col-md-8"> <div class="skew-text"> <div class="big-menu-nav two-col"> <div class="row"> <div class="col-md-6"> <h5>categories</h5> <ul class="sm-nav-item"> <li><a href="">category item</a></li> <li><a href="">category item</a></li> <li><a href="">category item</a></li> <li><a href="">category item</a></li> <li><a href="">category item</a></li> <li><a href="">category item</a></li> <li><a href="">category item</a></li> </ul> </div> <div class="col-md-6"> <h5>our work</h5> </div> </div> <blockquote> more big idea. lorem ipsum dolor sit amet, consectetur adipiscing elit </blockquote> <a href="" class="btn read-more read-more-primary"> our clients </a> </div> </div> </div> <div class="col-md-4 menu-info"> <div class="info-text top-padding text-center"> <h5>featured</h5> <h3>bla bla</h3> <a href="" class="btn read-more">view details</a> </div> </div> </div> <!--end big menu grid--> </div> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">about</a> </li> </ul> </nav> <!--end nav--> </div> <!--end container--> </div> <!--end header--> </body>as can see, on nav, wanted keep navigation active show other links.
please help
is want? changed top:0px top:55px of .header .navbar .nav .nav-item:hover > div:before
$(document).ready(function(){ $(".nav-link.sub").mouseover(function(){ $(".header").css("background", "rgba(0,0,0,0.6)"); }); $(".nav-link.sub").mouseout(function(){ $(".header").css("background", "#fff"); }); });.header{ transition:0.6s; } .header .navbar .nav .nav-item div.big-menu { position: absolute; display: block; opacity: 0; width: 100%; max-height: 450px; top: 80px; left: 0; z-index: 399; visibility: hidden; overflow: hidden; background: #ffffff; color: #181717; -webkit-transition: 0.3s ease 0.15s; transition: 0.3s ease 0.15s; } .header .navbar .nav .nav-item div.big-menu .big-menu-body { position: relative; overflow: hidden; background-color: white } .header .navbar .nav .nav-item:hover > div { opacity: 1; visibility: visible; overflow: visible; } /* used :after apply overlay */ .header .navbar .nav .nav-item:hover > div:before { content: ''; position: fixed; z-index: auto; width: 100%; height: 100%; top: 54px; left: 0; background-color: rgba(0, 0, 0, 0.6); }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/> <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js" integrity="sha384-xxxxxxxx" crossorigin="anonymous"></script> <body> <div class="header"> <div class="container"> <nav class="navbar navbar-light bg-faded"> <a class="navbar-brand" href="#">navbar</a> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link sub" href="#">sub menu</a> <div class="big-menu"> <div class="big-menu-body bg-img-2"> <div class="row big-menu-container"> <div class="col-md-8"> <div class="skew-text"> <div class="big-menu-nav two-col"> <div class="row"> <div class="col-md-6"> <h5>categories</h5> <ul class="sm-nav-item"> <li><a href="">category item</a></li> <li><a href="">category item</a></li> <li><a href="">category item</a></li> <li><a href="">category item</a></li> <li><a href="">category item</a></li> <li><a href="">category item</a></li> <li><a href="">category item</a></li> </ul> </div> <div class="col-md-6"> <h5>our work</h5> </div> </div> <blockquote> more big idea. lorem ipsum dolor sit amet, consectetur adipiscing elit </blockquote> <a href="" class="btn read-more read-more-primary"> our clients </a> </div> </div> </div> <div class="col-md-4 menu-info"> <div class="info-text top-padding text-center"> <h5>featured</h5> <h3>bla bla</h3> <a href="" class="btn read-more">view details</a> </div> </div> </div> <!--end big menu grid--> </div> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">pricing</a> </li> <li class="nav-item"> <a class="nav-link" href="#">about</a> </li> </ul> </nav> <!--end nav--> </div> <!--end container--> </div> <!--end header--> </body>
Comments
Post a Comment