Bootstrap affix - Cant manage to hide image element when scrolling down
-
21-12-2019 - |
Question
When I scroll down I want to hide the big logo and expose the small logo
<div class="row clearfix" >
<div class="col-md-12 column">
<nav class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="10">
<div class="navbar-header"> <a class="big_logo" href="#"><img src="img/logo.png" alt="logo"></a><a class="small_logo" href="#"><img src="img/logo_small.png" alt="logo_small"></a></div>
</nav>
</div>
</div>
I dont know what I am messing up here in my CSS:
.big_logo {
}
.big_logo.affix {
display:none;
}
.small_logo {
display:none;
}
.small_logo.affix {
}
Solution
You are expecting .big_logo
and .small_logo
to get the class .affix
. It's the element that has data-spy="affix"
that's actually getting the .affix
class so you need to modify your CSS selector to .affix .big_logo instead of .big_logo.affix like this:
.small_logo {
display: none;
}
.affix .small_logo {
display: block;
}
.affix .big_logo {
display: none;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow