Twitter Bootstrap Question posted in

Twitter-Bootstrap: Navbar is behind Carousel. How do I get it in front? – Twitter bootstrap

I have a Navbar i fixed after some Info-Text that, as soon as you scroll down gets fixed on top.
Directly under the Navbar there is a picture-carousel. However: for some reason the navbar hides behind the carousel when i scroll futher. I cannot bring it to stay on top.

I already tried to change the navbar-inverse to navbar-fixed-top but then the rest is not working.

this is the jsfiddle: https://jsfiddle.net/hwpdu066/

Code is below.

Can anyone help me out with this please?

Thanks!

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

/* Affix for hiding the top Menu/Infos - Bringing the navbar on top*/

.affix {
  top: 0;
  https: //jsfiddle.net/#
  width: 100%;
  position: fixed;
}

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


/* Navbar stuff */

.navbar-brand {
  margin: 0px;
  padding: 0 0 0 35px;
}

.navbar {
  min-height: 100px;
}

.navbar-custom {
  padding: 25px 0;
  background-color: black;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 200;
  border-radius: 0;
  margin-bottom: 0;
  width: 100%
}

.navbar-inverse {
  border-width: 0;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}


/*Carousel stuff*/

.carousel-inner img {
  width: 100%;
  margin: auto;
  min-height: 500px;
  max-height: 500px;
  object-fit: cover;
  /*fits the image without actually stretching it*/
}

.carousel-inner>.item {
  width: 100%;
}


/* Hide the carousel text when the screen is less than 600 pixels wide */

@media (max-width: 600px) {
  .carousel-caption {
    display: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <!--Upper Menu and Info-->
  <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) navbar on scroll</h3>
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
  </div>

  <!--Navigation-->
  <nav id="mainNav" class="navbar navbar-default navbar-inverse navbar-custom " data-spy="affix" data-offset-top="197">
    <div class="container">
      <div class="navbar-header page-scroll">
        <a class="navbar-brand" href="#">this is the navbar</a>
      </div>
    </div>
  </nav>

  <!--Picture Carousel-->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://media.istockphoto.com/photos/overhead-view-of-two-business-persons-in-the-lobby-picture-id520791880?s=2048x2048" alt="Image">
        <div class="carousel-caption">
        </div>
      </div>

      <div class="item">
        <img src="http://media.istockphoto.com/photos/friends-connection-digital-devices-technology-network-concept-picture-id525208898?s=2048x2048" alt="Image">
        <div class="carousel-caption">
          <h3>Lorem</h3>
          <p>Lorem ipsum...</p>
        </div>
      </div>
    </div>

    <!-- Left and right controls -->
    <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>
    <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>
    </a>
  </div>

  <!-- for scrolling-->
  <div>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
    <h1>for scrolling<br></h1>
  </div>
</body>
Tags:

4

Answers


  1. 0

    Try using z-index on the navbar on the css file. Z-index rearrange the stack order of the element.

    Login or Signup to reply.
  2. 0

    try this one:

    You can Add Z-index:-9; in your .carousel-inner>.item class file 

    @import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

/* Affix for hiding the top Menu/Infos - Bringing the navbar on top*/

.affix {
  top: 0;
  https: //jsfiddle.net/#
  width: 100%;
  position: fixed;
}

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


/* Navbar stuff */

.navbar-brand {
  margin: 0px;
  padding: 0 0 0 35px;

}

.navbar {
  min-height: 100px;
}

.navbar-custom {
  padding: 25px 0;
  background-color: black;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 200;
  border-radius: 0;
  margin-bottom: 0;
  width: 100%
}

.navbar-inverse {
  border-width: 0;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}


/*Carousel stuff*/

.carousel-inner img {
  width: 100%;
  margin: auto;
  min-height: 500px;
  max-height: 500px;
  object-fit: cover;
  /*fits the image without actually stretching it*/

}

.carousel-inner>.item {
  width: 100%;
  z-index:-9;
}


/* Hide the carousel text when the screen is less than 600 pixels wide */

@media (max-width: 600px) {
  .carousel-caption {
    display: none;
  }
}

    DEMO HERE

    Login or Signup to reply.
  3. 0

    Updated your js fiddle https://jsfiddle.net/hwpdu066/14/

    Just add 

    #myCarousel
{
 z-index: -1;
}
    Login or Signup to reply.
  4. 0

    try this code

      .navbar-custom{
    z-index:999;
}

    https://jsfiddle.net/hwpdu066/13/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search