I'm currently working on a code snippet to dynamically add and remove classes on mobile devices. It seems to function properly when I manually resize the browser window to mimic a mobile screen, but upon refreshing the page, it stops working.
$(document).ready(function(){
$(window).on('load, resize', function mobileViewUpdate() {
var viewportWidth = $(window).width();
if (viewportWidth <= 800) {
$('.header').removeClass('header-transparent');
$('#navdiv').removeClass('bottom_border');
$('.navbar-main').addClass('nav-shadow');
$('#nav-icon').addClass('navbar-toggler-icon2');
}
});
});