Austin Melms Austin Melms - 15 days ago 4
HTML Question

Whats wrong with my navbar?

I'm using bootstrap, and when I scroll down, my navbar just goes away. (Even though it follows for a bit. It's easier to put it on my test site than to post screenshots. http://dev.melmsie.com/

If you need code here instead of inspecting the site, let me know.

Bonus: Also, why is my main picture (the wild-flowers) missing a bit on the right? (I see white)

Edit: Ignore the rest of the site, it's only ~50% done

<body>
<div class="container-fluid">
<div class="main-section">
<nav class=" navbar navbar-default">
<div class="container-fluid col-md-12 col-xs-12">
<div class="headers-bfg">
<div class="navbar-header">
<a class="navbar-brand" href="#">BFG</a>
</div>
<div class="navbar-header">
<a class="navbar-brand col-xs-2" href="#"><i class="fa fa-heart" aria-hidden="true"></i></a>
</div>
</div>
<ul class=" nav navbar-nav ">
<li><a href="#">Balloons</a></li>
<li><i class="fa fa-small fa-circle" aria-hidden="true"></i></li>
<li><a href="#">Flowers</a></li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li><a href="#">Gifts</a></li>
<li><i class="fa fa-circle" aria-hidden="true"></i></li>
<li><a href="#">Hours</a></li>
</ul>
</div>
</nav>



.navbar {
position: fixed;
width: 100%;
}

.nav {
float: right;
text-align: left;
font-size: 20px;
letter-spacing: .5px;

Answer

You just add z-index for this rule CSS

.navbar {
  z-index: 9000000;
}

if you want more details about z-index seeing this documentation w3schools