I am having an issue with my fixed navigation bar created using bootstrap 4. I want to reduce the height of the navbar as I scroll down the page, but it does not seem to be working. Here is a link to a video showing the problem in action:
Link to the video showcasing the issue
I would like my navbar to behave like the one in this video
Below is some code that I have tried:
$(document).ready(function() {
$('.nav-button').click(function() {
$('.nav-button').toggleClass('change');
});
$(window).scroll(function() {
var position = $(this).scrollTop();
if (position >= 200) {
$('.nav-menu').addClass('.custom-navbar');
} else {
$('.nav-menu').removeClass('.custom-navbar');
}
});
});body {
font-family: 'Montserrat', sans-serif;
}
/* Rest of the CSS code here */