Bootstrap css visible on load and page switch

Question

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/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/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 class="indexlink" 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

Nobody can help you without your code, check https://stackoverflow.com/tour and https://stackoverflow.com/help/how-to-ask — Alex Angelico, Jun 17 '22 at 17:48
@AlexAngelico For some reason forgot about that. But I don't know if you can see much of that — Type Beta, Jun 17 '22 at 19:07

score 0 · Accepted Answer · answered Jun 18 '22 at 08:33

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

score -1 · Answer 2 · answered Jun 17 '22 at 16:35

-1

did you try adding "!important" to class?

Example:

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

answered Jun 17 '22 at 16:35

Tarik Jasarevic

11
6

I tried although it wouldn't be the nicest way to do it tbh, but it does not change it sadly. I mean the problem is not that it is not shown at all, but rather that through (I guess my transition) it transitions from the bootstrap css into mine – Type Beta Jun 17 '22 at 19:09
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Ethan Jun 17 '22 at 21:58

Bootstrap css visible on load and page switch

2 Answers2