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 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>

htmlcssbootstrap-5

Answer №1

Upon closer inspection, it appears to consist of two components. The shades of blue and dark blue share identical hex values, necessitating modification according to your preferences:

:root {
    --white: #F9F7F7;
    --light-blue: #DBE2EF;
    --blue: blue;
    --dark-blue: darkblue; 
}

Additionally, there seems to be a mistake where .hover is utilized instead of :hover in the CSS code. It should be corrected as follows:

.nav-link:hover {
    color: var(--dark-blue) !important;
}

Answer №2

Update the color values within your root variables

:root {
    --white: #F9F7F7;
    --light-blue: #DBE2EF;
    --blue: #3F72AF; <- Keep the same values
    --dark-blue: #3F72AF; <- Keep the same values
}

Now modify

.nav-link.hover {
    color: var(--dark-blue) !important;
}

To

.nav-link:hover {
    color: var(--dark-blue) !important;
}

Answer №3

sky-blue and navy-blue are the same hue; consider modifying one of them:

:root {
    --white: #FFFFFF;
    --light-blue: #AED6F1;
    --sky-blue: #87CEEB;//<-- adjusted this
    --navy-blue: #000080; 
}

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 there a way to eliminate span tags from elements?

I need to replace all the span tags with the class "article" and add new span tags to the content <div class="asd"> <span class="location">Foo</span> <span class="article">bar</span> <span ...

javascriptjqueryhtml

What is the best way to implement a link that triggers a chat box in HTML?

Hello, I need some assistance with an HTML project. I am attempting to create a hyperlink that displays as a group of words, and when clicked, triggers a pop-up message. Additionally, I would like to have control over the content displayed in the pop-up ...

htmlpopup

Dealing with customized protocol responses in JavaScript

My web server is set up to return a response like: HTTP/1.1 302 Found message://ActualMessage While this setup works seamlessly for UI clients like Android and iOS, I'm faced with the challenge of handling this case on a web browser. For instance, ...

javascripthtml

Ways to disable mousewheel function in jQuery

I am trying to deactivate the mouse scroll in jQuery and successfully did so, however, I encountered this error message jquery.min.js:2 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See Thi ...

javascripthtmljquerycssmousewheel

Within an HTML document, select one checkbox out of two checkboxes without utilizing JQuery

Is there a way to select only one checkbox out of two? I know it can be done easily using Jquery, but is there a default option in HTML for this as well? I have exactly 2 checkboxes. Thank you. code: <input type="checkbox" value="1" name="foo" /> ...

jquerycsshtmlcheckbox

When I use .fadeToggle, my div transitions smoothly between visible and hidden states

Looking to create a sleek navigation menu that showcases a colored square when hovered over? I'm currently experiencing an issue where the squares are not aligning correctly with the items being hovered. Switching the position to absolute would likely ...

javascriptjqueryhtmlcsshover

Tips on how to align a wrapper-div in the center without affecting the positioning of the

I am looking to keep my page perfectly centered in the browser without affecting the content (similar to how align-text: center works). Specifically, I want to center my wrapper-div. How can I achieve this? Here is a simplified version of my current page ...

htmlcsspositioning

Having trouble getting Sass extending to work in a basic scenario?

Here we have a simple example of Sass code, an Angular 2 component that accesses the Sass code, and the rendered HTML. However, there seems to be an issue with the blueBig span element in the last part. As someone new to Sass, I am not sure why this basic ...

cssangularsass

I am creating accordion-style bootstrap tables using data generated from an ng-repeat loop, all without the use of ui.bootstrap or jquery

My attempt at creating a table with rows filled using ng-repeat is not working as expected. I want a collapsible panel (accordion) to appear on click of each row, but only a single row is rendering with my current code. Here is a link to my code: var ap ...

javascripthtmlangularjs

How to vertically align an image within a div that has a variable height

Is there a way to center an image vertically within a div that is 1/5 of the screen's height? I have managed to horizontally center the image, but vertical alignment seems tricky. Here's the code I've tried so far: http://jsfiddle.net/ws911 ...

htmlcssvertical-alignmentviewport-units

Struggling to retrieve information from session storage to pass along to a PHP class

Is there a way to fetch the email of the currently logged-in user from sessionStorage and send it to a PHP file? I have tried implementing this, but it seems to be not functioning properly. Could you assist me in resolving this issue? <?php $mongoCl ...

javascriptphphtmlajaxgetelementbyid

What is the most efficient way to organize an array by date?

Here is the data I have: const data = [{date: "2022-05-10 13:36:00", open: 155.535, low: 155.4, high: 155.67, close: 155.44}, {date: "2022-05-10 13:35:00", open: 155.23, low: 155.2102, high: 155.62, close: 155.53}, {date: "2022-05 ...

javascripthtmlalgorithmsorting

How can I align 2 images side by side at the top and 1 beside them at the

I'm attempting to recreate an image using Bootstrap to minimize the need for additional CSS. The image I'm trying to replicate can be viewed https://i.sstatic.net/gBaVo.png. I've been struggling with the code and haven't been able to ge ...

htmltwitter-bootstrap

Troubleshooting: Issue with onclick event in vue.js/bootstrap - encountering error message "Variable updateDocument not found"

As a newcomer to frontend development, I have a basic understanding of HTML5, CSS, and Javascript. Recently, I started working on a vue.js project where I integrated bootstrap and axios. Everything seemed to be working fine until I encountered an issue whe ...

javascriptvue.jsaxiosfrontendbootstrap-5

Is there a way to alter the text color upon touching it?

I'm attempting to modify the background color of a button and also change the text color inside the button. While I was successful in changing the button's color, the text color remained the same. Even after adding a hover effect to the text, the ...

cssreactjstailwind-css

Wordpress problem with Bootstrap JavaScript code involving data-toggle="collapse"

Currently facing an issue with my project. This is my first attempt at creating a WordPress blog, inspired by the HTML site www.humantools.com.mx and building a blog for it at www.humantools.com.mx/blog. There's a strange problem: when logged in, the ...

javascriptjquerycsswordpresstwitter-bootstrap

Building a local database using the MVC framework concept

Can a locally stored database be developed using MVC framework principles in javascript and html5? Thank you Ravindran ...

javascriptdatabasehtmljavascriptmvc

The alignment of two elements is off in mobile display

Why aren't my two divs centered in mobile view? I am using Vuetify CSS flex helper justify-center to try and achieve it, but it doesn't seem to be working. Even when I use justify-sm-center, it still doesn't work. What am I missing? <v-co ...

cssvue.jsflexboxvuetify.js

What is the significance of the .jpg?t= in the URL?

This webcam image displays the code ?t=1512496926. What exactly does this code signify? Could it be related to time? Is it just a random string of characters? https://i.stack.imgur.com/ZAZMy.jpg ...

phphtmljpeg

Generating a multiplication grid using PHP

I'm currently facing a challenge regarding the presence of an additional "0" box on my multiplication table. Below is the code that I have been working with: $cols = 10; $rows = 10; $number = 0; $number2 = 0; echo "<table border=\"1\"> ...

phphtml