I'm trying to make Navbar decrease when I scroll down the page, assigning the class .sticky to <nav> . But for some reason, the bar does not diminish, it only changes color. I've already tried assigning the class to another <div> , but the size does not change, just the color.
I'm using Bootstrap.
Check out the codepen: link
I made three small changes to your codepen, and it seemed to work as you want it to be:
1- The height a Navbar is created in the class ".navbar" and not in the ".nagivation".
.navbar {
height: 100px;
min-width: 100%;
background-color: rgba(0, 255, 0, 0.5);
display: table;
table-layout: fixed;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
2- I created the separate .sticky class (you can create it together with the others later, but I think it best to have it alone first).
.sticky{
background-color: rgba(255, 0, 0, 0.8);
visibility: visible;
height: 40px !important;
}
3-In the Js file I selected the ".navbar" class, which is where the ".sticky" class will be inserted
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('.navbar').addClass('sticky');
} else {
$('.navbar').removeClass('sticky');
}
});
obs: I changed the colors of the .sticky and .navbar bars, to have a better perception of what was going on.
This is occurring because your .navigation element is blocking the height of the content, try adding this css:
.sticky .navigation {
min-height:80px;
height:80px;
}
You need to treat the child elements in order for your slash to be correct.