Home > Back-end >  Remove bootstrap nav-link hover background color
Remove bootstrap nav-link hover background color

Time：07-31

I've been trying to remove the background color of nav-link hover by setting it to transparent but they still show a background when being hovered. I would like to change the hover color for the text only like the nav-brand but cannot figure how. Could someone help me with this please? I really appreciate it. Here is my HTML (ejs):

        <!DOCTYPE html>
    <html lang="en" dir="ltr">
    
    <head>
      <meta charset="utf-8">
      <title>Ben Nguyen's Website</title>
      
      <!-- Bootstrap 5.2.0 -->
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
      <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
      <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.3.0/mdb.min.css" rel="stylesheet">
    
      <!-- Font Awesome -->
      <script src="https://kit.fontawesome.com/f71ab2a16d.js" crossorigin="anonymous"></script>
      
      <!-- Google Fonts -->
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,200&family=Ubuntu:ital,wght@1,300&display=swap" rel="stylesheet">
    
      <!-- CSS -->
      <link rel="stylesheet" href="css/styles.css">
    
      <!-- Font Awesome -->
      <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
    
    </head>
    
    <body>
        <!-- Navbar -->
        
        <nav container-fluid">
              <a  href="#">Ben's</a>
              <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
              </button>
              <div  id="navbarNav">
                <ul >
                  <li >
                      <a  href="/">Home</a>
                  </li>
                  <li >
                      <a  href="/">Projects</a>
                  </li>
                  <li >
                      <a  href="/">Contact Me</a>
                  </li>
              </ul>
              </div>
            </div>
        </nav>
        
        <!-- Carousel Section -->
        
        <div id="carouselExampleIndicators"  data-bs-ride="true">
          <div >
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" 
              aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
              aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
              aria-label="Slide 3"></button>
          </div>
          <div >
            <div >
              <img src="https://mdbootstrap.com/img/Photos/Others/images/76.jpg"  alt="...">
              <div  style="background-color: rgba(0, 0, 0, 0.496);">
                <div >
                  <div >
                    <h1 >Hello, World!!!</h1>
                    <h5 >A Person</h5>
                    <a  href="/" target="_blank" role="button">More About
                      Me!!!</a>
                  </div>
                </div>
              </div>
            </div>
        
            <div >
              <img src="https://mdbootstrap.com/img/Photos/Others/images/77.jpg"  alt="...">
              <div  style="background: rgba(0, 0, 0, 0.6);">
                <div >
                  <div >
                    <h2>Hello Again</h2>
                    <a 
                      href="/" target="_blank" role="button">A Button</a>
                  </div>
                </div>
              </div>
            </div>
        
            <div >
              <img src="https://mdbootstrap.com/img/Photos/Others/images/78.jpg"  alt="...">
              <div  style="background-color: rgba(0, 0, 0, 0.3);">
                <div >
                  <div >
                    <h2>Hello Again Again</h2>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button  type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
            <span  aria-hidden="true"></span>
            <span >Previous</span>
          </button>
          <button  type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
            <span  aria-hidden="true"></span>
            <span >Next</span>
          </button>
        </div>
        <!-- Carousel Section -->
    
    
    <!-- MDB -->
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.3.0/mdb.min.js"
></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>

<footer id="footer">
  <div >
    <p>2022</p>
  </div>
</footer>

</html>

CSS:

/* Navbar Section */

.navbar {
    position: absolute;
    z-index: 1;
    left: 15px;
    color:rgba(0, 0, 0, 0.2);
}

.nav-icons {
    margin-left: 1000px;
}

.nav-link {
    color: rgb(254, 254, 254);
}

.navbar ul li a:hover {
    background-color: transparent !important;
    color: #e35454d7;
}

.nav-item:hover {
    background-color: #30264fd7;
}

.navbar-brand {
    color: rgb(254, 254, 254);
    font-family: "Ubuntu";
    font-size: 20px;
}

.navbar-brand:hover {
    color: #e35454d7;
}

.button-contactMe:hover {
    background-color: #100f1fcb;
}


/* Carousel Section */


.carousel {
    position: absolute;
    z-index: 0;
}

/* Footer Section */

#footer {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
}

I use express to render ejs files:

const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

app.get("/", function(req, res){
  res.render("list");
});

app.listen(process.env.PORT || 3000, function() {
  console.log("Server started successfully");
});

Expected result (Nav-brand hover)

Current problem (Nav-link hover)

CodePudding user response：

you may try display: block; and then give that bg color or whatever you intend to do... or you should inspect element on the browser and can try styling there... hope it helps

CodePudding user response：

The target you need to address to make a transparent background is .navbar ul li:hover and not the anchor.

See the working example below.

/* Navbar Section */

.navbar {
  position: absolute;
  z-index: 1;
  left: 15px;
  color: rgba(0, 0, 0, 0.2);
}

.nav-icons {
  margin-left: 1000px;
}

.nav-link {
  color: rgb(254, 254, 254);
}

.navbar ul li:hover {
  background-color: transparent !important;
  color: #e35454d7;
}

.nav-item:hover {
  background-color: #30264fd7;
}

.navbar-brand {
  color: rgb(254, 254, 254);
  font-family: "Ubuntu";
  font-size: 20px;
}

.navbar-brand:hover {
  color: #e35454d7;
}

.button-contactMe:hover {
  background-color: #100f1fcb;
}


/* Carousel Section */

.carousel {
  position: absolute;
  z-index: 0;
}


/* Footer Section */

#footer {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.2);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Ben Nguyen's Website</title>

  <!-- Bootstrap 5.2.0 -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.3.0/mdb.min.css" rel="stylesheet">

  <!-- Font Awesome -->
  <script src="https://kit.fontawesome.com/f71ab2a16d.js" crossorigin="anonymous"></script>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,200&family=Ubuntu:ital,wght@1,300&display=swap" rel="stylesheet">

  <!-- CSS -->
  <link rel="stylesheet" href="css/styles.css">

  <!-- Font Awesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>

</head>

<body>
  <!-- Navbar -->

  <nav  container-fluid ">
              <a  href="# ">Ben's</a>
              <button  type="button " data-bs-toggle="collapse " data-bs-target="#navbarNav " aria-controls="navbarNav " aria-expanded="false " aria-label="Toggle navigation ">
                <span ></span>
              </button>
              <div  id="navbarNav ">
                <ul >
                  <li >
                      <a  href="/ ">Home</a>
                  </li>
                  <li >
                      <a  href="/ ">Projects</a>
                  </li>
                  <li >
                      <a  href="/ ">Contact Me</a>
                  </li>
              </ul>
              </div>
            </div>
        </nav>
        
        <!-- Carousel Section -->
        
        <div id="carouselExampleIndicators "  data-bs-ride="true ">
          <div >
            <button type="button " data-bs-target="#carouselExampleIndicators " data-bs-slide-to="0 " 
              aria-current="true " aria-label="Slide 1 "></button>
            <button type="button " data-bs-target="#carouselExampleIndicators " data-bs-slide-to="1 "
              aria-label="Slide 2 "></button>
            <button type="button " data-bs-target="#carouselExampleIndicators " data-bs-slide-to="2 "
              aria-label="Slide 3 "></button>
          </div>
          <div >
            <div >
              <img src="https://mdbootstrap.com/img/Photos/Others/images/76.jpg "  alt="... ">
              <div  style="background-color: rgba(0, 0, 0, 0.496); ">
                <div >
                  <div >
                    <h1 >Hello, World!!!</h1>
                    <h5 >A Person</h5>
                    <a  href="/ " target="_blank " role="button ">More About
                      Me!!!</a>
                  </div>
                </div>
              </div>
            </div>
        
            <div >
              <img src="https://mdbootstrap.com/img/Photos/Others/images/77.jpg "  alt="... ">
              <div  style="background: rgba(0, 0, 0, 0.6); ">
                <div >
                  <div >
                    <h2>Hello Again</h2>
                    <a 
                      href="/ " target="_blank " role="button ">A Button</a>
                  </div>
                </div>
              </div>
            </div>
        
            <div >
              <img src="https://mdbootstrap.com/img/Photos/Others/images/78.jpg "  alt="... ">
              <div  style="background-color: rgba(0, 0, 0, 0.3); ">
                <div >
                  <div >
                    <h2>Hello Again Again</h2>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <button  type="button " data-bs-target="#carouselExampleIndicators " data-bs-slide="prev ">
            <span  aria-hidden="true "></span>
            <span >Previous</span>
          </button>
          <button  type="button " data-bs-target="#carouselExampleIndicators " data-bs-slide="next ">
            <span  aria-hidden="true "></span>
            <span >Next</span>
          </button>
        </div>
        <!-- Carousel Section -->
    
    
    <!-- MDB -->
<script
  type="text/javascript "
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.3.0/mdb.min.js "
></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js " integrity="sha384-Xe 8cL9oJa6tN/veChSP7q mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk " crossorigin="anonymous "></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js " integrity="sha384-ODmDIVzN pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK " crossorigin="anonymous "></script>
</body>

<footer id="footer ">
  <div >
    <p>2022</p>
  </div>
</footer>

</html>

Page link：https//www.codepudding.com/Backend/494251.html

Prev:Hiding the overflowing part of an overlay div
Next:React - Persist Data on Page Refresh (useEffect, useContext, useState)
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding