0

I use bootstarp navbar. When I scroll up.. the block content appear behind the navbar. Navbar fixed on the top.

My Navbar

<main id="navfix" class="m-5">
    <nav class="navabar_bgc py-0 navbar navbar-expand navbar-light fixed-top">


        {% include 'sidebar.html' %}

        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav ml-auto mt-lg-0">
               <div>...</div>
            </ul>
        </div>
    </nav>
</main>

<div class="block__content">
{% block content %}
{% endblock %}
</div>

My css:

#navfix {
  width: 100%;
}
.navabar_bgc {
  background-color: rgba(103, 250, 34, 0.4) !important;
  box-shadow: 0px 0px 8px !important;
  z-index: 10 !important;
}
.block__content {
  z-index: 5;
  overflow: auto;
}

enter image description here

Any other suggestion please give me..Thanks.

Pradip Kachhadiya
  • 2,067
  • 10
  • 28
  • 1
    you added alpha/opacity to your color here`rgba(103, 250, 34, 0.4)` the 0.4 is the problem. increase the value to 1 and the navbar will be solid. – hansTheFranz Nov 10 '20 at 09:33
  • Its happening because you have set the background color with alpha value, which is impacting the opacity of the Navbar. if you don't want the content to appear behind the Navbar, I would suggest you to remove the opacity value. ```background-color: rgb(103, 250, 34);``` – Prathamesh Koshti Nov 10 '20 at 09:34

1 Answers1

1

I edited your code and add some demo text to narrate the solution. Hope this works for you.

Solution: I positioned block__content absolute

#navfix {
  width: 100%;
  position: fixed;
}
.navabar_bgc {
  background-color: rgba(103, 250, 34, 0.4) !important;
  box-shadow: 0px 0px 8px !important;
  z-index: 10 !important;
}
.block__content {
    z-index: 5;
    overflow: auto;
    height: calc(100% - 100px);
    position: absolute;
    top: 60px;
}
<main id="navfix" class="m-5">
    <nav class="navabar_bgc py-0 navbar navbar-expand navbar-light fixed-top">


        {% include 'sidebar.html' %}

        <div class="collapse navbar-collapse" id="collapsibleNavId">
            <ul class="navbar-nav ml-auto mt-lg-0">
               <div>...</div>
            </ul>
        </div>
    </nav>
</main>

<div class="block__content">
<p>
  Some contentSome contentSome contentSome contentSomeSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contententSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome contentSome content contentSome contentSome contentSome contentSome contentSome content
</p>
</div>
Ahmad Habib
  • 2,053
  • 1
  • 13
  • 28