CSS filter property disabling fixed position on navigation bar

Question

I made my navigation bar and positioned it (fixed), and it works fine. I was able to scroll down and all. As soon has I added filter (brightness) to it the image on my page, the navigation bar disappeared. I have tried using pseudo-elements and setting the position (absolute/relative), I set the filter property to the container of the child element of the image, it still didn't work. Can someone help me on how to have my navigation bar display on fixed position and still have the image filtered. Thanks in Advance.

nav {
  position: fixed;
  background-color: #fff;
}

nav ul {
  margin: 0;
  padding: 0;
}

.navbar-brand {
  padding-right: 20px;
}

nav li {
  display: inline-block;
  padding: 10px;
}

nav a {
  color: #000;
  text-decoration: none;
}

nav a:hover {
  color: #ff6600;
  text-decoration: none;
}

.title-image img {
  width: 100%;
  height: 300px;
  filter: brightness(60%);
}

<nav>
  <ul>
    <li>
      <a class="navbar-brand" href="#">Navbar Brand</a>
    </li>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">services</a>
    </li>
  </ul>
</nav>


<div class="title-image">
  <img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>

JSfiddle Demo

score 1 · Accepted Answer · answered Sep 08 '20 at 11:07

Just add z-index to your nav element as follow

nav{
  position: fixed;
  background-color: #fff;
  z-index:999;
}
nav ul{
  margin: 0;
  padding: 0;
  }
.navbar-brand{
  padding-right: 20px;
}

nav li{
  display: inline-block;
  padding: 10px;
}
nav a{
  color: #000;
  text-decoration: none;
}
nav a:hover{
  color: #ff6600;
  text-decoration: none;
}

.title-image img{
  width: 100%;
  height: 300px;
  filter: brightness(60%);
}

<nav>
  <ul>
     <li>
       <a class="navbar-brand" href="#">Navbar Brand</a>
     </li>
     <li>
       <a href="#">Home</a>
     </li>   
     <li>
       <a href="#">About</a>
     </li>
     <li>
       <a href="#">services</a>
     </li>
  </ul>
</nav>


<div class="title-image">
  <img src="https://images.unsplash.com/photo-1599546824091-f49550ce8cbc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
</div>

Even the `z-index` of 1 would be enough in this particular case. — SMAKSS, Sep 08 '20 at 11:17
Yes of course but as it is a navbar it is better to set a height value instead of a very low one. — MaxiGui, Sep 08 '20 at 11:19

score 0 · Answer 2 · answered Sep 08 '20 at 11:07

0

The navbar didn't disappear, it is just beneath the image. To have it in front, you should use z-index: 10; (or any value greater than 0).

See more at : https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

In addition, keep in mind that your image - or any element after your navbar - will be positioned on top of your page. May be you'll want to let the equivalent of the navbar height as space before any content.

answered Sep 08 '20 at 11:07

SeeoX

565
3
18

equivalent of the navbar height as space...sorry i don't understand, how do i do that? – stephenmiles08 Sep 08 '20 at 11:26
You could either add this space as padding-top of the parent element of the navbar, or add this space as margin-top of the following element of the navbar – SeeoX Sep 08 '20 at 11:28

CSS filter property disabling fixed position on navigation bar

2 Answers2