Bootstrap 5 nav over hero image

having issues with a bootstrap 5 nabber over a hero image… in mobile when the menu is expanded it pushed down the hero, rather than show over it. I have tried playing with the z-index but that didn’t seem to work. There are two states to this nav… after the user scrolls 200px ‘fixed-top’ is added. The nav seems to work after scrolling and the nav is fixed. It’s before they scroll where the issue is.

here is a codepen with what I have…
https://codepen.io/aaron4osu/pen/ExbKKbG

html

<header id="" class="site-header">

	<nav id="navbar_top" class="navbar navbar-expand-lg ">
	 <div class="container">
	   <a class="navbar-brand" href="<?php echo get_site_url(); ?>">
	   	logo here
	   </a>

	   <a class="nav-phone" href="#">(555) 867-5309</a>

	  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"  aria-expanded="false" aria-label="Toggle navigation">
	      <span class="navbar-toggler-icon"></span>
	    </button>
	  <div class="collapse navbar-collapse" id="main_nav">
		  <ul class="navbar-nav mx-auto">

		  	<li class="nav-item"><a class="nav-link"  href="#">Link</a></li>
            <li class="nav-item"><a class="nav-link"  href="#">Link</a></li>
            <li class="nav-item"><a class="nav-link"  href="#">Link</a></li>
            <li class="nav-item"><a class="nav-link"  href="#">Link</a></li>

            <li class="nav-item dropdown">
		      <a class="nav-link  dropdown-toggle" href="#" data-bs-toggle="dropdown"> Dropdown right </a>
		        <ul class="dropdown-menu dropdown-menu-right">
		        <li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
		        <li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
		        </ul>
		    </li> 
		    

		  </ul>

		  <ul class="navbar-nav ml-auto hide-mobile">
			<li class="nav-item social-nav-item">
			  <a class="nav-link social-nav-link red" href="" target="_blank"><i class="fab fa-facebook-f"></i></a>
			</li>

			<li class="nav-item social-nav-item">
			  <a class="nav-link social-nav-link red" href="" target="_blank"><i class="fab fa-instagram-square"></i></a>
			</li>

			<li class="nav-item social-nav-item">
			  <a class="nav-link social-nav-link red" href="" target="_blank"><i class="fab fa-twitter-square"></i></a>
			</li>
		  </ul> 

	  </div> <!-- navbar-collapse.// -->
	 </div> <!-- container-fluid.// -->
	</nav>
</header><!-- #masthead -->
  



  <section class="hero">
    <div class="container h-100">
       <div class="row h-100">
        <div class="col-md-10 offset-md-1 my-auto text-center">
          <h1 class="headingLg white uc" data-aos="fade-right" data-aos-delay="400">Lorem ipsum dolor sit&nbsp;amet</h1>
          <h2 class="headingSm white uc" data-aos="fade-right" data-aos-delay="400">Lorem ipsum dolor sit&nbsp;amet</h2>
        </div>
      </div><!-- close row -->
    </div><!-- close container  -->    
  </section>

  <section class="mobile-tool-bar bg-theme">
    <div class="row d-flex justify-content-evenly h-100">
      <div class="col text-center my-auto">
         <a class="white" href="#"><i class="fas fa-phone"></i></a>
      </div>

      <div class="col text-center my-auto">
         <a class="white" href="#" target="_blank"><i class="fab fa-instagram-square"></i></a>
      </div>
      
      <div class="col text-center my-auto">
         <a class="white" href="#" target="_blank"><i class="fab fa-facebook-f"></i></a>
      </div>
    </div>
  </section>

css

/* =====  Nav section   ========  */

#navbar_top{
	background-color: rgba(0, 0, 0, 0);
}

.fixed-top{
	background-color: #751912 !important;
}

.fixed-top {
    top: -40px;
    transform: translateY(40px);
    transition: transform .3s;
}

.navbar-brand{
	display: none;
}
.fixed-top .navbar-brand{
	display: block;
}

.nav-phone{
	display: block;
}
.fixed-top .nav-phone{
	display: none !important;
}

.fixed-top .navbar-brand img{
	width: 150px;
}
.navbar-nav .nav-item, .navbar-nav .nav-item a{
	color: #fff;
}

.navbar-toggler {
	padding: .25rem .75rem;
	font-size: 1.25rem;
	line-height: 1;
	background-color: rgba(237, 237, 237, 0.24);
	border: 1px solid rgb(252, 252, 252);
	border-radius: .25rem;
	transition: box-shadow .15s ease-in-out;
	color: #000;
}

@media (max-width: 1399px) {

}
/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {

}

/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
	
	.navbar-nav .nav-item, .navbar-nav .nav-item a{
		color: #000;
	}

.fixed-top .navbar-nav .nav-item, .fixed-top .navbar-nav .nav-item a{
		color: #fff !important;
	}
	.hide-mobile{
		display: none;
	}
}

/*// Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {


}
/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {


}


/* =====================================*/
/* =============  Hero  ===============*/
/* =====================================*/

.mobile-tool-bar{
	display: none;
  font-size: 36px;
  height:100px;
}

.hero{
      margin-top: -60px;
      height:800px;
      background: linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.1) 46%, rgba(0,0,0,.1) 100%), url('https://i.imgur.com/SJLZLLx.jpeg');
      background-repeat:no-repeat !important;
      background-position: bottom left;
      background-size: cover !important;
 }

.bg-theme{
  
}

js

	
		
		window.addEventListener('scroll', function() {
	       
			if (window.scrollY > 200) {
				document.getElementById('navbar_top').classList.add('fixed-top');
				// add padding top to show content behind navbar
				navbar_height = document.querySelector('.navbar').offsetHeight;
				document.body.style.paddingTop = navbar_height + 'px';
			} else {
			 	document.getElementById('navbar_top').classList.remove('fixed-top');
				 // remove padding top from body
				document.body.style.paddingTop = '0';
			} 
		});


thanks in advance for any help

To make the nav scroll over the content then it would have to be position:absolute.

Roughly like this:

@media screen and (max-width: 981px) {
  #navbar_top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  #navbar_top .navbar-collapse.show {
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.5);
  }

  #navbar_top.fixed-top {
    position: fixed;
    top: -40px;
  }
  #navbar_top.fixed-top .navbar-collapse.show {
    padding: 0;
    background: transparent;
  }
}

The nav becomes position:fixed when scrolled so the above code re-instates that original otherwise it would be position:absolute and scroll away.

You need to ensure there is a background behind the the drop down or the links will be hard to see. Alternatively style it as you have done with the scroll position:fixed menu perhaps.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.