I'm currently designing a website with a complex color palette that requires certain elements to have an opacity of 0.8 for the background-color.
The navigation bar on my site uses Bootstrap's affix top feature, so it stays fixed while scrolling. I've set the nav bar's background-color to white to ensure readability at all times.
Most of the content displays perfectly without any issues. However, when using opacity, the special content overlaps the navigation bar, making it difficult to view.
The problem arises when content with opacity sits on top of the navigation bar, causing it to be hidden. Without opacity, the navigation bar stays visible above everything else.
Does anyone have suggestions on how to resolve this issue?
Provided below is a simplified version of the code I'm working with:
CSS:
body {
background-color: white;
position: relative;
}
div.nav-bar {
background-color: white;
}
div.normal-content {
background-color: gray;
}
div.special-content {
background-color: red;
opacity: 0.8;
}
HTML:
<div data-spy="affix" data-offset-top="200" class="row nav-bar">
...
</div>
...
<div class="normal-content">
...
</div>
<div class="special-content">
...
</div>