What is the best method to modify the hover text color in a Bootstrap navbar?

Whenever the cursor hovers over the letters, I attempted to modify their color, but unfortunately, it didn't work as expected.

nav a {
  text-decoration: none;
}

.logo {
  height: 3rem;
}

.navbar-nav .nav-item .nav-link.custom:hover {
  color: #ffc107;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2e2323383f383e2d3c0c79627f62796b7d626531464f5b43">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<section>
  <nav class="navbar navbar-dropdown navbar-expand-lg  bg-dark">
    <div class="container-fluid">
      <div class="navbar-brand mx-5">
        <span class="navbar-logo">
          <a href="#">
            <img src="https://via.placeholder.com/100" class="logo" />
          </a>
        </span>
  <span class="navbar-caption-wrap">
          <a class="navbar-caption text-white text-primary display-7">TRIMAXPRO</a>
        </span>
      </div>
      
      <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 nav-dropdown nav-right mx-auto align-items-center" data-app-modern-menu="true">
          <li class="nav-item mx-4">
            <a class="nav-link link text-white display-4 custom" href="#">Nosotros</a>
          </li>
          <li class="nav-item mx-4">
            <a class="nav-link link text-white display-4 custom" href="#">Servicios</a>
          </li>
          <li class="nav-item mx-4">
            <a class="nav-link link text-white display-4 custom" href="#">REEL</a>
          </li>
          <li class="nav-item mx-4">
            <a class="nav-link link text-white display-4 custom" href="#">Nuestros Clientes</a>
          </li>
          <li class="nav-item mx-4">
            <a class="nav-link link text-white display-4 custom" href="#">Contacto</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</section>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55373a3a21262127342515607b67777363657175706123747578">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh7532h95OGNyZPhcTNXj1NW767RuBCsyN/o0jlpcV876Qyq46cDfL" crossorigin="anonymous"></script>

csstwitter-bootstrapbootstrap-5

Answer №1

To customize the default Bootstrap palette theme, it is recommended to use Sass for overriding.

However, you can also achieve the same result quicker by using the !important rule:

.navbar-nav .nav-item .nav-link.custom:hover {
color: #ffc107 !important; /* Apply !important */
}

Answer №2

It is recommended to adjust colors in Bootstrap by utilizing the provided variables. If that's not feasible, consider avoiding color classes on navigation items and utilize CSS for both static and hover states. Overriding Bootstrap's color classes can be challenging without resorting to using !important, which is best avoided.

.navbar-nav .nav-item .nav-link.custom {
  color: #fff;
}

.navbar-nav .nav-item .nav-link.custom:hover {
  color: #ffc107;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12707d7d66616660736252273c213c20">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<section>
  <nav class="navbar navbar-dropdown navbar-expand-lg  bg-dark">
    <div class="container-fluid">
      <div class="navbar-brand mx-5">
        <span class="navbar-logo">
          <a href="#">
            <img src="https://via.placeholder.com/70" class="logo" />
          </a>
        </span>
  <span class="navbar-caption-wrap">
          <a class="navbar-caption text-white text-primary display-7">TRIMAXPRO</a>
        </span>
      </div>
      
      <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 nav-dropdown nav-right mx-auto align-items-center" data-app-modern-menu="true">
          <li class="nav-item mx-4">
            <a class="nav-link link display-4 custom" href="#">Nosotros</a>
          </li>
          <li class="nav-item mx-4">
            <a class="nav-link link display-4 custom" href="#">Servicios</a>
          </li>
          <li class="nav-item mx-4">
            <a class="nav-link link display-4 custom" href="#">REEL</a>
          </li>
          <li class="nav-item mx-4">
            <a class="nav-link link display-4 custom" href="#">Nuestros Clientes</a>
          </li>
          <li class="nav-item mx-4">
            <a class="nav-link link display-4 custom" href="#">Contacto</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</section>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37555858434443455647770219041905">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

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

Tips for accurately relocating elements within a tooltip

Currently, I am working on implementing a like model within a Rails application. In order to display which user liked the bonus, I have incorporated foundation tooltip. Below is the code snippet: - avatars = bonus.like_user_avatars.map { |avatar| image_t ...

jquerycssruby-on-railstooltipzurb-foundation

Incomplete Website Encryption Alert

Currently, I am developing a website called "usborroe.com" and have just set up a GeoTrust Business ID SSL Certificate. However, despite my efforts to ensure full encryption on the site, an error message is indicating that it is not fully encrypted and t ...

phphtmlcsssslssl-certificate

Obtain the value of an attribute and store it as a variable in Google

Hello! I currently have code on my website that retrieves the site search query stored in the 'value' attribute. Specifically, I am looking to capture the word 'disjoncteur' for a variable within Google Tag Manager (GTM). <div class= ...

csscss-selectorsgoogle-tag-manager

Vue unable to load material icons

The icons npm package "material-icons" version "^0.3.1" has been successfully installed. "material-icons": "^0.3.1" The icons have been imported as shown below. <style lang="sass"> $material-icons-font-path: '~material-icons/iconfont/'; ...

cssvue.jssassvuejs2google-material-icons

React Navigation Item Toolbar Misplacement

I've been trying to align the navigation item with the logo on the same line within the toolbar, but I'm facing an issue where they keep appearing in different rows. To see the error for yourself, check out the code sandbox here. This is how I s ...

javascriptcssreactjsstyled-components

Center two distinct elements using Bootstrap's center-block class

Check out my code snippet below: <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="center-block" style="w ...

htmlcsstwitter-bootstrap

Updating the background image for a radio button

Is it possible to customize the background image within the active radio button from the default redmond to aristo? .ui-radiobutton-icon { background-image: url("/images/ui-icons_38667f_256x240.png.jsf"); } Can someone help with the correct syntax for t ...

cssjsf-2primefaces

Difficulty maintaining list formatting in AngularJS and Bootstrap due to ng-repeat functionality

I'm currently working on a project where I need to display content from an array using ng-repeat in Angular. The content is originally in JSON format, but it has been stringified before being added to the array. The problem I am facing is that this c ...

javascripthtmljsonangularjstwitter-bootstrap

Take off the wrapping from the package

I need help with my code on how to remove the wrapper span tag without removing the text. <ul> <li> <a href="#"> </a> <ul> <li> <a href="#"> ...

jquerycss

Container Based Absolute Positioning in Bootstrap

I am struggling with aligning text properly within a container. I want it to look like the image, but the text keeps ending up at the far right side of the page. https://i.sstatic.net/aSsrC.png Could you assist me in achieving this? Thank you! HTML: &l ...

htmlcsscontainerspositioningabsolute

Is there a way to connect a CSS external file that is saved on Dropbox?

Is it possible to link an external CSS file stored in Dropbox with HTML? I have followed all the instructions I could find online, including clicking and pressing "Copy Dropbox Link" to generate an href link. However, it doesn't seem to be working. ...

htmlcssdropbox

Struggle between Angular and fundamental CSS principles

Upon following the steps below, I aim to achieve my desired grids: How to set auto-margin boxes in flexible-width design using CSS? The solution provided is effective when implemented outside of Angular. However, when inserted inside an Angular component ...

cssangulartypescript

The "html" element fails to achieve a full height when applying a 100% height setting

I am facing a height problem of 100% <!doctype html> <html> <head> <meta charset="utf-8"> <title>My Dreamweaver Website</title> <link rel="stylesheet" href="style.css"> </head> <body> <section clas ...

htmlcssdreamweaver

troubleshooting responsive design issues with Bootstrap and PHP

this is the issue I'm facing and what I require: Please provide assistance with fixing the code for my website project. What exactly is the problem and how can it be resolved? Thank you. <?php include 'init.php'; $stmt = $con->prepar ...

phphtmlcsstwitter-bootstrap-3

Creating a blur effect on an image tag when hovering using CSS and HTML

I am currently developing a Portal website for one of my classes, and the template provided by my professor utilizes the <picture> tag to adjust images depending on the browser's size. My goal is to add a blur effect and darken the image while d ...

htmlcss

Expanding to a full width of 100%, images on desktop screens are displayed larger than their original

I am facing a challenge with my three images lined up in a row, each with a width of 323px. In order to make my website responsive, I decided to switch from using width: 323px; to width: 100%;. While this adjustment worked well on mobile devices, I encoun ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

When running `node compile.js`, no combined CSS file is being created

I have finally mastered the art of setting up and executing the "node compile.js" file in the claro theme folder to compile each *.less file into its corresponding *.css file. However, I noticed that the old claro.css file remains unchanged. Is this the in ...

cssnode.jsdojothemescustomization

What are the steps for implementing a two-column layout in reveal.js?

When creating my slides using reveal.js, I write them in Markdown code. I am now looking to present my content (text, bulleted lists, or images) in a traditional two-column text layout. While I am open to a more complex initial setup, I want to ensure that ...

cssmarkdownreveal.js

show textboxes positioned in the middle of a slanted rectangle

Is there a way to place centered textboxes inside each of the colorful boxes in the image below? Update: I've posted my feeble attempt below. Admittedly, design is not my forte and I'm struggling with this task. p.s. To those who downvoted, tha ...

htmlcss

Pressing a specific button triggers a broadcast signal, prompting a modal window to pop up and display relevant information

Within my website's HTML page named rollup.html, there exists a button that triggers the opening of a modal. <button id="myBtn" ng-click="printDivModal('rollup-tab')">ModalTest</button> In the accompanying JavaScript file, roll ...

htmlangularjstwitter-bootstrapbootstrap-modalbroadcast