how to make overlay navigation bar in bootstrap
Question
i'm just learning about front end. i have a problem to make an overlay navigation bar instead of dropdown menu when it reach extra small page. so this is what i've done:
function openNav() { document.getElementById("navbarSupportedContent").style.height = "100%"; } function closeNav() { document.getElementById("navbarSupportedContent").style.height = "0%"; }
#navbarSupportedContent { height: 0; width: 100%; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-x: hidden; transition: 0.5s; } #overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } #navbarSupportedContent a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; }
<html lang="en"> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-white"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="openNav()"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <ul class="navbar-nav ml-auto" id="overlay-content"> <li class="nav-item pr-5"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item pr-5"> <a class="nav-link" href="#">Products</a> </li> <li class="nav-item pr-5"> <a class="nav-link" href="#">Contacts</a> </li> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html>
when i try to hit the button when it reach extra small, the overlay goes down but it doesn't reach a hundred percent page and it suddenly goes up again. does anyone can help me?
thanks in advance !
1 answers
solution1
1 ACCPTED 2020-04-15 08:50:32
This is happening because you are mixing up Bootstrap core functions and your customs.
Simply remove the Collapse classes of Bootstrap, since you already write your javascript code to achieve what you need.
Add this line of CSS:
@media (min-width: 992px) {
.navbar-expand-lg .navbar-toggler {
display: block;
}
}
Since Bootstrap 4 Media Queries will hide an element matching that class for a screen bigger than 992px.
And then remove all the collapse-related class from your HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" onclick="openNav()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navbarSupportedContent">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
Here's a live working pen: https://codepen.io/alezuc/pen/dyYGobJ
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.