I am using bootstrap for my layout. I have this navbar
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<a class="navbar-brand" href="#">
<img class="logo" src="../../../assets/navbar/logo.png" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto mr-4">
<li class="nav-item active">
<a class="nav-link" routerLink="/about-us">ABOUT US <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/careers">CAREER</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/contact-us">CONTACT US</a>
</li>
</ul>
</div>
</nav>
Under the navbar i have this header image with text on it
<div class="container-header">
<img src="../../../assets/about-us/about-us-image-header.png" alt="About Us" style="width:100%;">
<div class="centered-header-text">
<h1>WHO WE ARE</h1>
</div>
</div>
the prooblem here is that when i add fixed-top, my image is hidden behind the navbar. I googled a lot and found some solution where they say i should give fixed height on my navbar
and after that on the header i should give also margin-top width the fixed height from the navbar.
But it is nasty solution and it works only on bigger devices. When the device is small,
i get the out of the box responsive hamburger menu from bootstrap where all anchor tags are inside, when i click on it then the anchors tags are showing. In this situation the image is still behind the navbar
and the dirty solution with fixed heights is not working.
How can i solve this problem guys ?
question from:
https://stackoverflow.com/questions/65844337/my-header-image-is-hidden-behind-the-fixed-top-navbar 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…