jquery - My header image is hidden behind the fixed top navbar

Question

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

Answer 1

Adding sticky-top solved the problem.

<nav class="navbar navbar-expand-lg navbar-light sticky-top">