Hey everyone, this is my first time reaching out for help here. I looked through previous questions but couldn't find anything similar to my issue.
I'm currently working on a corporate website using bootstrap3 in Brackets. I've been testing it on the latest versions of Chrome and Safari.
The problem I'm facing is trying to shrink the navbar's height and change its background color using JQuery addClass and removeClass, but unfortunately, it's not working at all. Interestingly, changing CSS properties via JQuery does work, specifically changing the background color. However, when attempting to alter multiple CSS properties via JQuery, it just doesn't seem to cooperate and only allows me to modify the background color.
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$("#top-bar").addClass('animated-header');
} else {
$("#top-bar").removeClass('animated-header');
}
});
$("#clients-logo").owlCarousel({
itemsCustom: false,
pagination: false,
items: 5,
autoplay: true,
})
}); //this is the part that’s causing trouble
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$("#top-bar").css("background-color", "#ef7c7c");
} else {
$("#top-bar").css("background-color", "transparent");
}
});
$("#clients-logo").owlCarousel({
itemsCustom: false,
pagination: false,
items: 5,
autoplay: true,
})
}); //this section works perfectly#top-bar {
background: transparent;
color: #fff;
-webkit-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
padding: 30px 0;
height: 15%;
}
#top-bar .animated-header {
/*Background Color of nav bar when scrolled*/
background-color: #ef7c7c;
padding: 10px 0;
height: 10%;
-webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
}<header id="top-bar" class="navbar-fixed-top animated-header">
<div class="container">Thank you all so much for your assistance!