Bootstrap Fixed Navbar Hovers Over HTML Section

Question

Here is something I wasn't expecting. I have a Bootstrap Navbar at the top of the page, but when I place the navbar-fixed element into the Navbar, it overlays the first <section> HTML tag that I have right under it. I'll post my code below, but what I am trying to get at is to have a fixed navbar on my site that is not hovering over my first section.

Navbar

<nav class="navbar navbar-default navbar-fixed" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">RTD62</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li><a href="#about" class="smoothScroll">About Me</a></li>
                <li><a href="#articles" class="smoothScroll">Articles</a></li>
                <li><a href="#talks" class="smoothScroll">Talks</a></li>
                <li><a href="#experience" class="smoothScroll">Experience</a></li>
                <li><a href="#contact" class="smoothScroll">Get In Touch</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" target="_blank"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
                <li><a href="#" target="_blank"><i class="fa fa-medium"></i> Medium</a></li>
                <li><a href="#" target="_blank"><i class="fa fa-dribbble"></i> Dribbble</a></li>
                <li><a href="#" target="_blank"><i class="fa fa-behance"></i> Behance</a></li>
            </ul>
        </div>
    </div>
</nav>

First HTML Section

<section class="about" id="about">
    <div class="container">
        <div class="hidden-xs" align="center">
            <amp-img src="img/Me.jpg" height="250" width="250" style="border-radius: 200px"></amp-img>
            <h3>Robert Dewitt</h3>
            <p>Front End Web Developer</p>
        </div>
    </div>
    <br />
</section>

I think you mean `.navbar-fixed-top`. `body { padding-top: 70px; }` See [Docs](https://getbootstrap.com/components/#navbar-fixed-top) for the solution — vanburen, May 06 '16 at 04:45
Possible duplicate of [twitter bootstrap navbar fixed top overlapping site](http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site) — vanburen, May 06 '16 at 04:49
My apologies - didn't look hard enough to realize it may have been a duplicate. — Robert Dewitt, May 06 '16 at 04:49

score 0 · Answer 1 · answered May 06 '16 at 05:23

0

Easy solution make a div around the nav bar. Call it anything you like, or if you have a header your nav should be inside.

Lets just say it is called headerbox

.headerbox { position: fixed; top: 100% }

Helpful ?

+rep me thanks

answered May 06 '16 at 05:23

Jesus Of Java

1
1

Bootstrap Fixed Navbar Hovers Over HTML Section

1 Answers1