CODEWITHSUNDEEP
bootstrap-4navigation
dancingbush
dancingbush

Reputation: 2281

Fixed Bootstrap Nav bar overridden by page content

I am using the nav bar example from here nav bar example:

Issue I am having is when I scroll down the page the nav bar, which is fixed, it is overridden by the content below it.

This is the nav bar:

<!-- Navigation if fluidic defult-->
<nav class="nav">
    <div class="container">
        <div class="logo">
            <a href="#">Your Logo</a>
        </div>
        <div id="mainListDiv" class="main_list">
            <ul class="navlinks">
                <li><a href="#">About</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <span class="navTrigger">
            <i></i>
            <i></i>
            <i></i>
        </span>
    </div>
</nav>

<section class="home">
</section>
<div style="height: 1000px">
    <!-- just to make scrolling effect possible -->

Now my own content begins here, it consists of a bootstrap carousel and cards wrapped in a bootstrap container:

!--Main contnet wraped in container Bootstrap grid system-->
<div class="container">
    <div class="row">
        <!--Take 3 columsn width for our left most list menu-->
        <div class="col-lg-3">
            <h1 class="my-4">Shop Name</h1>
            <div class="list-group ">
                <a href="#" class="list-group-item ">Category 1</a>
                <a href="#" class="list-group-item ">Category 1</a>
                <a href="#" class="list-group-item ">Category 1</a>
            </div>

        </div>

        <!--Main body - Botstrap Carousle-->
        <div class="col-lg-9">
            <div id="carouselExampleIndicators" class="carousel slide carousel-fade my-4 " data-ride="carousel">

I have not included all the code as its quite length.

This is an image of the nav bar been overridden by the content below it as you scroll down the page:

Fixed nav bar overridden as we scroll down the page

So my question what could cause this?

Upvotes: 0

Views: 36

Answers (1)

Federico Moretti
Federico Moretti

Reputation: 584

You must add other classes such as fixed-top in order to get it fixed and over the content. Try:

<nav class="navbar fixed-top">
  […]
</nav>

Consider that using a nav element here is wrong. You should try something like:

<header class="navbar fixed-top">
  <a class="navbar-brand" href="#" >Your Logo</a>
  <button class="navbar-toggler">
    <span class="navbar-toggler-icon"></span>
  </button>
  <nav class="navbar-nav">
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

My example is far from being complete, but you can see more examples here: https://getbootstrap.com/docs/4.4/components/navbar/. Your element must have a fixed-* class to get a z-index higher than the contents below or it could be overridden like so. If you plan to add two or more elements with position absolute or fixed, then you should set a z-index for each accordingly.

Upvotes: 1

Related Questions