How to change hover text for bootstrap navbar

Question

Hi using a custom navbar from bootstrap - how do I change the hover color for this (to red)? Also if I wanted to change the actual color of the text too how would I do that. I have tried a few things using CSS but nothing seems to be working.

I have attached the code below:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: rgba(0,0,0,0.85); height:50px; font-size:20px;">

  <div class="container">

    <div class="navbar-collapse collapse" id="navbar10">
      <ul class="navbar-nav nav-fill w-100">
        <li class="nav-item">
          <a class="nav-link" href="/index.html">
            <img src="/img/logo.png" alt="Prospex logo" style="width:50px;" />
          </a>
          <li class="nav-item">
            <a class="nav-link" href="#">Vision</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Locations</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Careers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Upcoming</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
      </ul>
    </div>
  </div>
</nav>

Have you tried with css pseudo-class `:hover`? For example you can add this rule to your css for change the background and text color `.navbar:hover { background-color: red; color: red; }` — Ray Soy, Nov 09 '18 at 14:54
Hi, do check out the following link. https://www.w3schools.com/cssref/sel_hover.asp — krishna_tandon, Nov 09 '18 at 15:06
Can you post a working snippet? The rest of the Navbar seems to be missing. — Carol Skelly, Nov 09 '18 at 15:16

score 1 · Answer 1 · answered Nov 09 '18 at 15:22

First remove inline style from nav element. Move them to separate css class and add another rule for hover effects to the same class.

E.g:-

.custom-nav {
  background-color: rgba(0,0,0,0.85);
  height:50px;
  font-size:20px;
}

.custom-nav:hover {
  background-color: red;
  color: white; // Any color for text
}

Or you can try bootstrap customize

score 1 · Answer 2 · answered Nov 09 '18 at 15:26

To change the .nav-item hover/focus style to red:

.navbar-dark .navbar-nav .nav-item .nav-link:focus,
.navbar-dark .navbar-nav .nav-item .nav-link:hover {
  color: red;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: rgba(0,0,0,0.85); height:50px; font-size:20px;">

  <div class="container">

    <div class="navbar-collapse collapse" id="navbar10">
      <ul class="navbar-nav nav-fill w-100">
        <li class="nav-item">
          <a class="nav-link" href="/index.html">
            <img src="/img/logo.png" alt="Prospex logo" style="width:50px;" />
          </a>
          <li class="nav-item">
            <a class="nav-link" href="#">Vision</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Locations</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Careers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Upcoming</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
      </ul>
    </div>
  </div>
</nav>

score 0 · Answer 3 · answered Nov 09 '18 at 15:04

Use the :hover pseudo-class:

h1 {
  /* default styling */
  text-align: center;
  color: white;
  background-color: #ccc;
  padding: 1em;
  
  /* transition timing */
  transition: all .5s
}

h1:hover {
  /* styling while the mouse is hovering */
  background-color: #333;
  padding: 2em;
}

<h1>
  Hover over me!
</h1>

How to change hover text for bootstrap navbar

3 Answers3