Struggling to incorporate bootstrap 4 into my sample project for the right side background. I'm facing some conflicts and attempts to align it on the right side are not successful. Does anyone know how to do this correctly?
Thank you
// Navbar scroll js //
jQuery(function($) {
"use strict";
// Determining the position of the #main element and adding necessary offsets
var mainbottom = $('#main').offset().top;
// On scroll
$(window).on('scroll',function(){
// Rounding the scroll position for efficiency
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.navbar').addClass('past-main');
$('.navbar').addClass('effect-main')
} else {
$('.navbar').removeClass('past-main');
}
});
/* Various navbar and scroll functionalities */
});/*----- Main Classes -----*/
html * {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Rest of the CSS rules and media queries */
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags, Bootstrap CSS, fontawesome kit and other scripts -->
</head>
<body>
<!—Navigation bar section—>
<!—End of Navigation bar section—>
<!—Home section—>
<!—End of Home section—>
<!-- Optional JavaScript -->
<!-- jQuery, Popper.js, Bootstrap JS -->
</body>
</html>