Upon loading my webpage or navigating between subpages, I've noticed that the Bootstrap.css styles are interfering with my CSS transitions. For some reason, my regular links appear orange initially, but they turn blue during loading or when transitioning to another page, resembling the default Bootstrap link styling.
I've double-checked how I structured them, so I'm not sure why this issue is occurring.
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3818c8c979097918293a3d6cdd1cdd3ce81869782d2">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9c9d2d5d2d4c7d6e693889488968bc4c3d2c797">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
I came across this solution which could be helpful, but it applies to every link and I prefer not to use workarounds like that.
UPDATE: Since there's interest in how I defined my classes:
.indexlink {
font-family: 'Source Sans', sans-serif;
font-weight: 400;
font-size: 20pt;
line-height: 1.5;
text-decoration: none;
color: #777777;
transition: 0.8s;
}
And this is how I implemented it in HTML:
<a class="indexlink" href="WEBSITE" target="_blank">
UPDATE 2: I also attempted to use jQuery as a potential fix, although I'd prefer to find a solution without relying on it:
<script>$(window).load(function() {$("body").removeClass("preload");});</script>
I added a "preload" class to my body element:
.preload * {
transition: none !important;
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
Unfortunately, this approach didn't resolve the issue either.
jquery.js:10363 Uncaught TypeError: url.indexOf is not a function at jQuery.fn.load