psj01 psj01 - 10 months ago 42
CSS Question

Navigation bar going below what ever is inside 'col-xs-4' class

I have a fixed banner at the top of my html page. When I scroll down the idea is to have the body go underneath the top navingation banner.

It works fine except for the icons i have inside the 'col-xs-4' class.
the icons (or what ever i put inside the col-xs-4 class) seem to go over the top banner.

How can I update this so the banner is always on top.

here is link to codepen

below is the html code :

<html>

<head>
<title>hello</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>

.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
position:fixed;
width:100%;
background-color:white;
}


.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}

</style>

</head>

<body id="top">


<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header myNavbar">
<a class="navbar-brand" href="#top">HOME</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse myNavbar" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">ABOUT</a>
</li>
<li><a href="#connect">CONNECT</a>
</li>
<li><a href="#projects">PROJECTS</a>
</li>
</ul>
</div>
</div>
</nav>



<div class="container-fluid bg-1 text-center">
<h3>hello world</h3>
<h3 style="color:lightblue;">say something...</h3>
</div>

<div id="connect">
<div class="container-fluid bg-3 text-center">
<h3>Connect</h3>

<div class="row">
<div class="col-xs-4">
<p>
<a href="#" id="linkedIn" target="_blank" class="social-btn"><i class="fa fa-linkedin fa-lg"></i></a>
</p>
</div>
<div class="col-xs-4">
<p>
<a href="#" id="github" target="_blank" class="social-btn"><i class="fa fa-github fa-lg"></i></a>
</p>
</div>
<div class="col-xs-4">
<p>
<a href="#" id="stackOverflow" target="_blank" class="social-btn"><i class="fa fa-stack-overflow fa-lg"></i></a>
</p>
</div>
</div>

<div class="row">
<div class="col-xs-4">
<p>
<a href="#" id="instagram" target="_blank" class="social-btn"><i class="fa fa-instagram fa-lg"></i></a>
</p>
</div>
<div class="col-xs-4">
<p>
<a href="#" id="medium" target="_blank" class="social-btn"><i class="fa fa-medium fa-lg"></i></a>
</p>
</div>
<div class="col-xs-4">
<p>
<a href="#" id="codepen" target="_blank" class="social-btn"><i class="fa fa-codepen fa-lg"></i></a>
</p>
</div>
</div>


</div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>

</html>

Answer Source

Just add this to your css:

.navbar-default {
  z-index: 1;
}

Updated CodePen Demo


You need to set the z-index so your fixed navbar appears in front of the other elements.


Here are some helpful docs/articles on z-index:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download