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 ?

score 5 · Accepted Answer · edited Feb 27 '19 at 19:17

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

Yes, you do need `padding-top` on the body for the fixed navbar, but that's different than the problem described with the navbar collapsed. The navbar isn't showing because you don't have `navbar-expand`. — Carol Skelly, Apr 05 '18 at 14:04
Thanks mate for the help been scratching it since long. newbie to bootstrap — Lokesh Pandey, Apr 05 '18 at 14:06

score 0 · Answer 2 · answered Apr 05 '18 at 13:56

0

You can try this

nav{
   position:fixed;
   }

answered Apr 05 '18 at 13:56

rk_1

106
2
13

score 0 · Answer 3 · answered Apr 05 '18 at 14:00

Have you tried this:

<nav class="navbar fixed-top navbar-light bg-light" style="position:fixed;">
    <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>

You should change the right class in the css page

score -1 · Answer 4 · edited Apr 05 '18 at 14:14

remove the fixed-top and use css

<nav class="navbar 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>

remove the fixed-top and use css – Wisdom Osinachi Apr 05 '18 at 13:55 — Wisdom Osinachi, Apr 05 '18 at 13:55

Bootstrap 4 Fixed top navbar shows collapsed and hides content

4 Answers4

Linked

Related