SeanMcDonagh SeanMcDonagh - 1 year ago 98
CSS Question

Navbar Always displayed behind images from carousel

I have tried using z-index, so that my navbar would appear over my carousel images... but to no avail. I think the reason it is not working is because it is not static.

The way I have it set up is so that when the user scrolls down, the navbar gradually disappears, when the user user scrolls up the navbar gradually appears. Whether this is interfering with the z-index.. I'm not sure. Any help is much appreciated.

The following is my HTML FOR NAVBAR:

<header class="nav-down">
<div class="navbar navbar-default navbar-fnt navbar-backgrnd center">
<div class="container-fluid navbar-inner">
<div class="navbar-header">
<a class="navbar-brand" href="#">SMcD</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Photos</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Me
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Seanie Mc</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Blog</a></li>

The following is my HTML FOR CAROUSEL

<div id="myCarousel" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>

<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="{% static 'personal/img/seanie1.jpg' %}" alt="Chania">

<div class="item">
<img src="{% static 'personal/img/seanie2.jpg' %}" alt="Chania">

<div class="item">
<img src="{% static 'personal/img/seanie3.jpg' %}" alt="Flower">

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>

<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>

There is alot more css, than what I am giving. But the rest is mainly changing the colors displayed when items on the navbar are clicked etc...

The Following is my CSS:

z-index: 2;

z-index: 1;

The Following is my JS:

$(document).ready(function() {



var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

didScroll = true;

setInterval(function() {
if (didScroll) {
didScroll = false;
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta) {
if (st > lastScrollTop && st > navbarHeight) {
} else {
if(st + $(window).height() < $(document).height()) {
lastScrollTop = st;

Answer Source

To show navbar in the top give higher z-index than carousel.

header {
  z-index: 100

Add "navbar-fixed-top" class to the navbar to make the navbar fixed.

Updated code

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