Menu
I have the navbar change from a transparent to a white background when I scroll. The text is white on the transparent, but I want to change the text to black when scroll to get a contrast. The problem is that color:black don't work? I dont know if this is enough info to find a solution, just write a comment on what more you need.
HTML
<header class="navbar-fixed-top">
<a href="#" id="logo" class="logo">Example<br>1001</a>
<nav id="navigation">
<ul class="nav__links">
<li><a class="hvr-reveal hjem" href="#">HOME1</a></li>
<li><a class="hvr-reveal webkamera" href="#">HOME2</a></li>
<li><a class="hvr-reveal værmelding" href="#">HOME3</a></li>
<li><a class="hvr-reveal status_nav" href="#">HOME4</a></li>
</ul>
</nav>
</header>
CSS
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 30px 10%;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
/* navbar change on scroll */
.navbar-fixed-top.scrolled {
background-color: red !important;
transition: background-color 200ms linear;
z-index: 1;
color: black;
}
239
asked Oct 24 '25 11:10
With jQuery, you can do it something like this
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$('.hvr-reveal').css('color', '#000');
} else {
$('.hvr-reveal').css('color', '#fff');
}
});
});
You can try being more specific with your approach. For example, try the following:
.navbar-fixed-top.scrolled {
background-color: red !important;
transition: background-color 200ms linear;
z-index: 1;
color: black;
}
.navbar-fixed-top.scrolled #navigation li .hvr-reveal {
color: black !important;
}
This way, even if you have conflicting Bootstrap styles, CSS Specificity saves the day for you. Also, if the code is in an external stylesheet, try including it below the bootstrap stylesheet link in the <head> tag. This gives higher precedence to your external styles.
35
answered Oct 26 '25 00:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With