Change Bootstrap navbar color when hover
The colors of the links are overridden by the a
tags' default styles, so you should apply it to the a
tag, not the li
tag:
nav ul li:hover a {
color: red;
}
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
<li class="your_account"><a href="#">Your Account</a></li>
</ul>
</nav>
How to change navbar hover color on bootstrap 4?
<style type="text/css">
html,
body {
overflow-x: hidden;
}
.navbar-light .navbar-brand {
color: #FFFFFF;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
color: #FFFFFF;
}
.navbar-light .navbar-nav .nav-link {
color: #FFFFFF;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: #ccc !important;
}
}
</style>
and html :
<nav class="navbar-expand-sm navbar-expand-md navbar-expand-lg navbar navbar-light" style="background-color: #0275D8;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
How to change the navbar-brand a:hover background-color in Bootstrap 5
It is probably because the css from Bootstrap has has more weight
TTry to add !important
a.navbar-brand:hover {background-color: #f00 !important;}
changing color of bootstrap navbar links on hover
.services-link strong:hover { color: green;}
<!doctype html><html>
<head> <title>Contact Us</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <link href="contact.css" type="text/css"></head>
<body> <div class="container-fullwidth"> <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top"> <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="NewMenu"> <div class="navbar-nav"> <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a> <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a> <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a> </div> </div> </nav> </div></body>
</html>
Bootstrap 4 Navbar Hover BG Color
Just add the py-0
Bootstrap class to the Navbar to remove the top/bottom padding so that your custom hover color fills the height. To maintain the original height, add top/bottom padding to the nav-link
s.
https://www.codeply.com/go/4ZBnt0gWFc
<nav class="navbar navbar-expand-lg py-0">
<a class="navbar-brand" href="#">
<img src="assets/img/logo-text.png" alt="Sample Image">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Videos</a>
<a class="nav-item nav-link" href="#">Blog</a>
<a class="nav-item nav-link" href="#">Merch</a>
</div>
</div>
</nav>
CSS to change link or hover color:
/* change the link color */
.navbar-nav .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
color: #ffffff;
}
In Bootstrap, how do I change what color the links are in my navbar when hovering over them?
You can approach it by different ways ..
- define a separate class in a separate css stylesheet and override the color by using
!important
:
e.g : make a class newClass
in newCss.css
.newClass:hover{
color: red !important; /*red is an example, put whatever you want*/
}
- define a style tag in the html :
<style>
.newClass:hover{
color: red !important; /*red is an example, put whatever you want*/
}
</style>
in HTML , put the class inside the anchor:
<li class="nav-item">
<a class=" newClass nav-link navbar-text-color-custom" href="#best-features">Kdo smo?</a></li>
By using !important
you ensure that the css color red is applied to the anchor.
Related Topics
HTML Float Right Element Order
Convert Embedded Svg to Png In-Place
How to Display Alt Text for an Image in Chrome
Avoiding Repeated Constants in CSS
Linethrough/Strikethrough a Whole HTML Table Row
HTML5 Canvas - Fill Circle with Image
Meta Viewport Just on Portrait
Offline iOS Web App: Loads My Manifest, But Doesn't Work Offline
Getting Youtube.Com to Load in Iframe
How to Make Firefox Auto-Refresh on File Change
CSS - Inline Elements Ignoring Line-Height
How to Make Image Caption Width to Match Image Width
When to Use <Span> Instead <P>
Chrome Does Not Expand Flex Parent According to Children's Content
How to Link to Google Maps with a Particular Longitude and Latitude