Seeking assistance in changing the logo and shrinking the navbar on scroll using Bootstrap 4. However, I want this effect to apply only when the screen size is greater than 992px. I've been trying to implement a nested function without much success.
I am open to alternative suggestions and would appreciate any help...
Here's my current code:
function adjustNavbar(x) {
if (x.matches) { // If media query matches
$('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
} else {
// Collapse Navbar & Change Logo on scroll
var shrinkNavbar = function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
$('.navbar-brand img').attr('src','../img/eventlogo_2019-white.svg');
} else {
$("#mainNav").removeClass("navbar-shrink");
$('.navbar-brand img').attr('src','../img/eventlogo_2019.svg');
}
};
// Auto-collapse navbar if page isn't at the top
shrinkNavbar();
// Collapse the navbar during scrolling
$(window).scroll(shrinkNavbar);
}
}
var x = window.matchMedia("(max-width: 991px)")
adjustNavbar(x) // Call listener function at run time
x.addListener(adjustNavbar) // Attach listener function on state changes