css Question posted in
Some basic documentation can be found here.

Css – How can I change Bootstrap navbar text color on hover?

I tried to change the color of the letters when the cursor is on them, but I can’t do it.

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
Tags:

2

Answers


  1. 0

    On Bootstrap you need to use Sass to override the default palette theme, it’s the best practice.

    Anyways, you can achieve the same in a quicker way using the !important rule

    .navbar-nav .nav-item .nav-link.custom:hover {
color: #ffc107 !important; /* Add !important */
}
    Login or Signup to reply.
  2. 0

    Modifying color in Bootstrap should ideally be done using the variables provided. If that’s not possible you should solve this problem by not using the color class on nav items, and instead use CSS for both static and hover states. Bootstrap’s color classes use very aggressive rules which are difficult to override without using !important, which should be 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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search