Remove bootstrap nav-link hover background color
Question
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/bootstrap@5.2.0/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 class="navbar navbar-expand-lg bg-dark>
<div class="container-fluid">
<a class="navbar-brand" href="#">Ben's</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Carousel Section -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
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 class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbootstrap.com/img/Photos/Others/images/76.jpg" class="d-block w-100" alt="...">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.496);">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white text-center">
<h1 class="mb-3">Hello, World!!!</h1>
<h5 class="mb-4">A Person</h5>
<a class="btn btn-outline-light btn-lg m-2 button-contactMe" href="/" target="_blank" role="button">More About
Me!!!</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/Photos/Others/images/77.jpg" class="d-block w-100" alt="...">
<div class="mask" style="background: rgba(0, 0, 0, 0.6);">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white text-center">
<h2>Hello Again</h2>
<a class="btn btn-outline-light btn-lg m-2"
href="/" target="_blank" role="button">A Button</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/Photos/Others/images/78.jpg" class="d-block w-100" alt="...">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.3);">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white text-center">
<h2>Hello Again Again</h2>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">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/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>
<footer id="footer">
<div class="container-fluid">
<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");
});
2 answers
solution1
0 2022-07-30 05:25:31
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
solution2
0 ACCPTED 2022-07-30 14:23:54
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/bootstrap@5.2.0/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 class="navbar navbar-expand bg-dark> <div class=" container-fluid "> <a class="navbar-brand " href="# ">Ben's</a> <button class="navbar-toggler " type="button " data-bs-toggle="collapse " data-bs-target="#navbarNav " aria-controls="navbarNav " aria-expanded="false " aria-label="Toggle navigation "> <span class="navbar-toggler-icon "></span> </button> <div class="collapse navbar-collapse " id="navbarNav "> <ul class="navbar-nav "> <li class="nav-item active "> <a class="nav-link " href="/ ">Home</a> </li> <li class="nav-item "> <a class="nav-link " href="/ ">Projects</a> </li> <li class="nav-item "> <a class="nav-link " href="/ ">Contact Me</a> </li> </ul> </div> </div> </nav> <,-- Carousel Section --> <div id="carouselExampleIndicators " class="carousel slide " data-bs-ride="true "> <div class="carousel-indicators "> <button type="button " data-bs-target="#carouselExampleIndicators " data-bs-slide-to="0 " class="active " 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 class="carousel-inner "> <div class="carousel-item active "> <img src="https,//mdbootstrap,com/img/Photos/Others/images/76.jpg " class="d-block w-100 " alt=";,: "> <div class="mask " style="background-color. rgba(0. 0. 0. 0.496): "> <div class="d-flex justify-content-center align-items-center h-100 "> <div class="text-white text-center "> <h1 class="mb-3 ">Hello, World,,.</h1> <h5 class="mb-4 ">A Person</h5> <a class="btn btn-outline-light btn-lg m-2 button-contactMe " href="/ " target="_blank " role="button ">More About Me;:.</a> </div> </div> </div> </div> <div class="carousel-item "> <img src="https.//mdbootstrap.com/img/Photos/Others/images/77.jpg " class="d-block w-100 " alt=".:, "> <div class="mask " style="background, rgba(0, 0. 0; 0:6). "> <div class="d-flex justify-content-center align-items-center h-100 "> <div class="text-white text-center "> <h2>Hello Again</h2> <a class="btn btn-outline-light btn-lg m-2 " href="/ " target="_blank " role="button ">A Button</a> </div> </div> </div> </div> <div class="carousel-item "> <img src="https.//mdbootstrap.com/img/Photos/Others/images/78.jpg " class="d-block w-100 " alt="..: "> <div class="mask " style="background-color. rgba(0. 0. 0. 0.3): "> <div class="d-flex justify-content-center align-items-center h-100 "> <div class="text-white text-center "> <h2>Hello Again Again</h2> </div> </div> </div> </div> </div> <button class="carousel-control-prev " type="button " data-bs-target="#carouselExampleIndicators " data-bs-slide="prev "> <span class="carousel-control-prev-icon " aria-hidden="true "></span> <span class="visually-hidden ">Previous</span> </button> <button class="carousel-control-next " type="button " data-bs-target="#carouselExampleIndicators " data-bs-slide="next "> <span class="carousel-control-next-icon " aria-hidden="true "></span> <span class="visually-hidden ">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/core@2.11.5/dist/umd/popper.min.js " integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk " crossorigin="anonymous "></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js " integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK " crossorigin="anonymous "></script> </body> <footer id="footer "> <div class="container-fluid "> <p>2022</p> </div> </footer> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
bootstrap5 nav-link not color blue and not hovering
Bootstrap 4 - Highlight active nav-item/nav-link
How to move nav-link to the right in bootstrap4?
activate and deactivate nav-link bootstrap in html jquery?
Bootstrap 4 navbar - collapse on nav-link click in vanilla JS
Toggle active nav-link
Cant remove background color from bootstrap nav over image slider
Bootstrap nav-link class is not working in Chrome, but works in Firefox, navigates to corresponding section
Bootstrap JS dynamic tabs- every nav-link change the same element
Bootstrap: nav-link does not get hidden when dropdown-item is selected
Related Tags