I am new to the world of HTML/CSS/Bootstrap and recently made a change to the color of a link on the navbar. However, I am encountering an issue where the original blue color of the link briefly appears when I refresh the page. I would like to prevent this from happening altogether. Any assistance on this matter would be highly appreciated!
In response to a request, I have included additional information that may be useful.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffffe4e3e4e2f1e0d0a5bea0bea2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Chakra+Petch:wght@300&family=Shadows+Into+Light&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</div>
<title>...</title>
</head>
<body>
<header>
<nav id="nav-bar">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="../../index.html">Return to Homepage</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Sections</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">...</a></li>
<li><a class="dropdown-item" href="#">...</a></li>
<li><a class="dropdown-item" href="#">...</a></li>
<li><a class="dropdown-item" href="#">...</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">...</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">..........</a>
</li>
<li class="nav-item ms-auto">
<a class="nav-link" href="#">.........</a>
</li>
</ul>
</nav>
</header>
</body>
CSS
body {
background-color: #212529;
}
a {
text-decoration: none;
}
#nav-bar {
background-color: none;
}
#nav-bar .active {
background-color: #ff2d6c;
border: 1px solid #ad1414;
}
#nav-bar .active:active {
background-color: #ff2d6c;
transform: scale(95%);
}
.nav-link {
color: #ffffff;
font-family: 'Roboto', sans-serif;
font-size: clamp(.625rem, 3vw, 1rem);
}
.nav-link:active {
color: #ffffff;
}
.nav-link:hover {
color: #ff8c00;
}
.nav-link:focus {
color: brown;
}
.dropdown-menu {
background-color: #ff2d6c;
border: 1px solid #ffffff;
}
.dropdown-item:hover {
background-color: #212529;
border: 1px solid #ffffff;
color: #ffffff;
}
h2 {
color: #ffffff;
font-family: 'Chakra Petch', sans-serif;
font-size: 1.5rem;
}
p {
color: #ffffff;
font-family: 'Oswald', sans-serif;
}
.guide-links li {
list-style-type: none;
font-family: 'Architects Daughter', cursive;
color: #ffffff;
text-decoration: underline;
}
.purchase {
display: flex;
justify-content: center;
margin-top: 1rem;
}
.store {
padding-left: 0;
}
.purchase img {
width: auto;
height: 2rem;
margin: .5rem;
}
.purchase li {
display: inline-block;
}
.guide-title {
display: flex;
justify-content: center;
color: #ff0055;
font-size: 2rem;
}