Bootstrap4 Navbar With Fullscreen Overlay

August 21, 2022 Post a Comment

I want the bootstrap 4 navigation bar to stay fully expanded. Also I would like to have an overlay element where the image and text is aligned to the right. i.e the clickable img/t

Solution 1:

You need to set the span element to display:block; and then you can use text-align: right;.

I added a class nav-icon to the span and moved your inline style to the css section:

Baca Juga

R: Error In As.vector(x, "character"): Cannot Coerce Type 'externalptr' To Vector Of Type 'character'
How Can Horizontal Divs Be Tied To Each Other So That When One Grows Vertically, An "associated" One Grows Vertically With It?
Navbar-collapse Not Working - Bootstrap + Github

.overlay {
    height: 100%;
    width: 0;
    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;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

.nav-icon{
     font-size:30px;
     cursor:pointer;
     display: block;
     text-align: right;
}

<body>
  
  <div id="myNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>
  
  
  <nav class="navbar navbar-expand navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="img/icons/logo/pquizlogo.svg" width="38" height="38" class="d-inline-block align-top" alt="">Brand-name
    </a>
    <div>
    <span class="nav-icon" onclick="openNav()">All categories &#9776;</span>
      <script>
      function openNav() {
      document.getElementById("myNav").style.width = "100%";
      }
      function closeNav() {
      document.getElementById("myNav").style.width = "0%";
      }
      </script>
    </div>
  </nav>
</body>

Html5 Works

Bootstrap4 Navbar With Fullscreen Overlay

Solution 1:

Post a Comment for "Bootstrap4 Navbar With Fullscreen Overlay"