Seeing the Bootstrap css load immediately upon the page loading and switching between pages

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

Answer №1

After some investigation, I was able to come up with a solution using jQuery and the existing code provided in the question. The issue at hand was that (window).load(function(... has been marked as deprecated starting from jQuery-1.8. (Credit goes to this helpful answer)


By replacing the deprecated code with:

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

The problem was successfully resolved.

It's disappointing that a CSS-only fix wasn't feasible in this case though.

Answer №2

Have you attempted including ""!important"" to the class?

For instance:

.header .nav-item .link{
  background-color: #000 !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible that .focus() does not function on a duplicated object?

Greetings to all! I have created a form with rows of input text fields. Users can add as many rows as needed by clicking the 'add row' button. The functionality to clone() for adding rows is working perfectly. In each row, an input field can o ...

Ensuring Consistent TD Heights in Email Designs

I am currently facing a challenge in building an HTML email, specifically in ensuring that two TD elements have the same height across all email clients. Since it is a responsive email design, I have opted to separate the columns into two tables instead o ...

The content is overflowing due to the height being set to 100%

I am facing a challenge with designing a webpage that has a header with dynamic height and a content area. The goal is for the content to fill up the remaining space on the page, even if there isn't enough text. This is a common issue that many peopl ...

Using Jquery and CSS to add a class with a 1-second delay when the mouse enters

I have successfully implemented the addClass function in my code, but I'm encountering issues when attempting to use delay or setTimeout functions. It's important to note that I'm avoiding the use of webkit attributes in CSS. If anyone has ...

I am interested in verifying the presence of a user

Below is the form for checking user existence using AJAX: <!DOCTYPE html> <html> <head><title>Register new user!</title> <script src="jquery-1.7.1.min.js"></script> </head> <body> ...

The status of the xmlhttp object remains unchanged

I was attempting to create an application showcasing the use of AJAX. Being new to AJAX, I couldn't pinpoint the error in my code. The XMLHttpRequest object is being created, but nothing else seems to be working. The ready state doesn't change to ...

How to resize and center an image within a div element as they both scale proportionally

Can someone help me figure out how to center a resized image within its container, which should also be centered? I've been struggling with this for 7 hours and can't seem to get it right. Any assistance would be greatly appreciated :-) Here is ...

How to use AJAX to retrieve data from a JSON file hosted on an external URL?

Is it possible to extract data from a JSON file that belongs to an external source such as ABS, a company that provides weather information? The weather data is stored in a JSON File. Why am I unable to access this information and save it? & ...

jQuery: automatic submission on pressing enter compared to the browser's autocomplete feature

Here is a JavaScript code snippet that automatically submits the form when the user presses the "enter" key: jQuery.fn.installDefaultButton = function() { $('form input, form select').live('keypress', function(e) { if ((e.which && ...

I'm trying to find a way to access a particular field within an HTML document using JavaScript in Node.js. Can anyone

<Response> <SMSMessageData> <Message>Delivered to 1/1 Total Cost: NGN 2.2000</Message> <Recipients> <Recipient> <number>+9109199282928</number> <cost>NGN 2.2000&l ...

How come my MySQL date is decreasing by one day when using JavaScript?

My todo list is stored in a MySQL database with columns for todoTitle and todoDate. However, when I display the todoDate on my website, it shows the date decremented by one day. For example, if the date in the database is 2016-12-20, it will show as 2016-1 ...

What is the method for including a Bootstrap Icon within a placeholder text?

I am attempting to insert a search icon inside an input text field, but I am unsure of how to accomplish this. My desired result is similar to: input search Can Bootstrap Icons be used within a placeholder? I have seen some examples, but the icon remaine ...

Tips for arranging divs in CSS grid with grid-template-areas technique

I am attempting to organize similar groups of elements in a grid: #grid { position: absolute; left: 135px; top: 158px; width: 1080px; height: 1035px; display: grid; grid-template-rows: 99px 1fr 1fr; grid-template-column ...

Verify the placement within the text box

Are there methods available in JavaScript or any JavaScript framework to determine the position within a textbox? For example, being able to identify that figure 1 is at position 2 and figure 3 is at position 3. Figure 1 Figure 2 ...

Animate a div once the parent section becomes visible while scrolling

I previously had this function working, but it seems that I have somehow messed it up in the process. My current setup includes a scroll hijack feature that navigates users to a new section or card each time they scroll. The script adds a visible class w ...

Preventing the display of AngularJS HTML tags while the app is being loaded

I am new to AngularJS (using version 1.5.8) and I am currently following the tutorials provided on docs.angularjs.org/tutorial. Below is the HTML code snippet: <div class="jumbotron"> <h1>{{application_name | uppercase }}</h1> ...

The search and sorting functionality in jquery DataTables is malfunctioning

I am facing difficulties with sorting and filtering the datatable as none of the JS functions seem to be working properly. I have already included the necessary JS files. Here are some details: I am connecting to a database to retrieve data in JSON format. ...

Solving the problem of Hover Effects in CSS

I am struggling to get the nav-link to be blue in color with a dark-blue hover effect. I managed to set the color correctly, but for some reason, the hover effect is not working. Can anyone help me figure out what the issue might be? Additionally, does any ...

PHP Session-Based Language Toggle

I have implemented a simple session switch on my website to make it bilingual. However, there is a flaw - whenever the user switches to the other language, they are redirected back to the index page. I am looking for a solution that allows the user to stay ...

Retrieve data from json files

After retrieving this object from my controller, I have a name, a list of beans, and a list of operations: { "name": "Charge", "beans": [ ], "operations": [ { "name": "getSize", "returnType": "java.lang.Integer", "descriptio ...