Could someone please assist me in preventing the .background image from overlapping with the skills div when the viewport expands either vertically or horizontally? I've tried several approaches without success. Any help would be greatly appreciated! As a beginner, it's possible that I might have overlooked a simple mistake causing this issue. Thank you!
$(document).ready(function(){
//MENU
$('.menu-icon').click(function(){
$('.menu-nav').animate({
height: 'toggle'
}, 200
);
});
//SKILLS
flagScroll = true;
$(window).scroll(function() {
if ($(this).scrollTop() > 40 && flagScroll) {
// apply effects and animations
flagScroll= false;
$('.html').animate({
marginRight: 0,
width: 100
}, 2200
);
$('.css').animate({
marginRight: 0,
width: 90
}, 2200
);
$('.javascript').animate({
marginRight: 0,
width: 40
}, 2200
);
}
});
});// Custom CSS code could go here
.custom-style {
background-color: red;
font-size: 16px;
}