Bootstrap css visible on load and page switch-CodePudding

When loading my page, or switching between subpages, it seems that the Bootstrapp.css is visible through my transitions in my css.

My normal link is orange, but on load or using it to the next page, it turns blue like the unedited bootstrapping links.

I oriented them like this, so there shouldn't be a problem right?

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link href="style.css" rel="stylesheet">

The only thing that might help I found was this but I can't use this workaround, as it is on every link.

EDIT: As some of you wanted to see how I built 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 my HTML:

<a  href="WEBSITE" target="_blank">

EDIT2: What I also tried already is using jquery, although I much rather solve it without:

<script>$(window).load(function() {$("body").removeClass("preload");});</script>

with a preload class on my body:

.preload * {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
   }

But that also did not work.

jquery.js:10363 Uncaught TypeError: url.indexOf is not a function at jQuery.fn.load

CodePudding user response：

I could find a solution with jQuery and the code already in the question. The Problem here was that (window).load(function(... is deprecated since jQuery-1.8. (Thanks for this Answer here)

So replacing this with:

<script>$(window).on('load' , function(){$("body").removeClass("preload");});</script>

works fine.

Still sad, that I can't fix it with only CSS though

CodePudding user response：

did you try adding "!important" to class?

Example:

.nav .nav-item .nav-link{
  color: #fff !important;
}