html - Bootstrap 4 Fixed top navbar shows collapsed and hides content

Question

I have already tried lot of threads on SO and also this one but couldn't get it done. I am trying to make one fixed navbar on top with bootstrap 4. But looks like the navbar is shifting towards top. I have tried by adding padding in css as suggested by official doc also but the content is shifting not the fixed navabar. Here is the default navbar image

And this is the fixed navbar image I am getting I don't know what I am missing in this. Here is the code

<nav class="navbar fixed-top navbar-light bg-light">
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item-active">
                    <a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/product">Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/career">Career</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#/contact">Contact Us</a>
                </li>
            </ul>
        </div>
    </nav>

Any help on this ?

Answer 1

You need to use the navbar-expand class to make the navbar show, otherwise it will be collapsed (since mobile is the default state).

https://www.codeply.com/go/HQbDGFwvxp

<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item-active">
                <a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/product">Products</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/career">Career</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#/contact">Contact Us</a>
            </li>
        </ul>
    </div>
</nav>

If you don't intent to use the mobile collapsible menu, just remove the navbar-collapse...

<nav class="navbar fixed-top navbar-expand navbar-light bg-light">
    <ul class="navbar-nav">
        <li class="nav-item-active">
            <a class="nav-link" href="#/">Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#/product">Products</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#/services">Services</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#/career">Career</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#/contact">Contact Us</a>
        </li>
    </ul>
</nav>

Similar questions
Bootstrap Navbar list items/links not showing
Disable responsive navbar in bootstrap 4

---

Note: When using the fixed-top Navbar, Bootstrap recommends adding padding to the top of the body to prevent content from being hidden by the Navbar..

body {
    padding-top: 56px;
}

Demo