CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Lokesh Pandey
Lokesh Pandey

Reputation: 1789

Bootstrap 4 Fixed top navbar shows collapsed and hides content

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 enter image description here

And this is the fixed navbar image I am getting enter image description here 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 ?

Upvotes: 1

Views: 7187

Answers (4)

Carol Skelly
Carol Skelly

Reputation: 362640

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

Upvotes: 5

Wisdom Osinachi
Wisdom Osinachi

Reputation: 1

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>

Upvotes: -1

Feber Castellon
Feber Castellon

Reputation: 21

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

Upvotes: 0

rk_1
rk_1

Reputation: 116

You can try this

nav{
   position:fixed;
   }

Upvotes: 0

Related Questions