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 anyone have any tips on how to overwrite Bootstrap styles with my own custom styles without causing chaos? Thank you in advance!
The necessary code is provided below. Thank you once again for assisting me in resolving this challenging problem of mine.
:root {
--white: #F9F7F7;
--light-blue: #DBE2EF;
--blue: #3F72AF;
--dark-blue: #3F72AF;
}
* {
margin: 0;
padding: 0;
font-family: "Outfit", sans-serif;
color: var(--blue);
}
body {
background: var(--white);
}
/* Navbar */
nav {
background: var(--light-blue);
}
#brand, #link {
color: var(--blue);
}
.nav-link.hover {
color: var(--dark-blue) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd8dfd9cadbeb9e859a8598">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="adcfc2c2d9ded9dfccdded98839c839e">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Links -->
<link rel="stylesheet" href="style.css" />
<link rel="shortcut icon" href="logo.png" type="image/x-icon" />
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-light fixed-top">
<div class="container-fluid">
<a class="navbar-brand" id='brand' href="#">Amodh Dhakal</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#" id='link'>Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#" id='link'>Project</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#" id='link'>Contact</a>
</li>
</div>
</div>