I successfully created a fixed navigation bar that worked perfectly on my webpage. However, when I added a filter (brightness) to an image on the page, the navigation bar disappeared. I tried various solutions including using pseudo-elements and adjusting the position property to no avail. I even attempted setting the filter property on the container of the image's child element, but it still didn't work. Can anyone provide guidance on how to maintain a fixed position for the navigation bar while applying a filter to the image? Thank you 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>