I am currently working on a project where I want the navbar (and logo) to shrink when users scroll down on larger screens where the mobile menu button is not visible (> 768px). On smaller screens, I need the navbar to remain at a fixed smaller size.
Despite using standard Bootstrap 3 classes for the HTML and implementing JavaScript code, I am facing an issue with the resizing behavior. The current script applies the desired changes to the navbar on all screen sizes, whereas I only want them to be applied on larger screens.
function resize() {
if ($(window).width() > 768) {
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("shrink-nav");
$(".navbar-brand img").addClass("shrink-logo");
} else {
$(".navbar-fixed-top").removeClass("shrink-nav");
$(".navbar-brand img").removeClass("shrink-logo");
}
});
} else {
$(".navbar-fixed-top").addClass("shrink-nav");
$(".navbar-brand img").addClass("shrink-logo");
}
}
resize();
The CSS styling for the modifier classes used in this implementation can be found below.
.shrink-logo {
position: relative;
height: 60px;
top: 15px;
}
.shrink-nav {
height: 70px;
padding: 15px 0;
}
If anyone can offer assistance with this issue, it would be greatly appreciated!