Bootstrap 3 navbar active li not changing background-color
You need to add CSS to .active
instead of .active a
.
Fiddle: http://jsfiddle.net/T5X6h/2/
Something like this:
.navbar-default .navbar-nav > .active{
color: #000;
background: #d65c14;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #000;
background: #d65c14;
}
Bootstrap navbar active background color when scrolling
Please correct code by following :
1) Please remove 'text-light'
class from tag. It should be
<a class="nav-link" href="#about">About</a>
2) Add data-spy="scroll"
to the element that should be used as the scrollable area (often this is the <body>
element).
<body data-spy="scroll" data-target=".navbar" data-offset="50">
3) Please update CSS selector :
.navbar-nav .active {
background-color: violet;
border-radius: 5px;
}
body {
position: relative;
}
.navbar {
padding: 0.8rem;
background-color: #1C2331;
}
.navbar-nav li {
padding-right: 25px;
}
.nav-link {
font-size: 1.1em !important;
font-weight: bold;
}
.navbar-nav .active {
background-color: violet;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<body data-spy="scroll" data-target=".navbar" data-offset="0">
<nav id="main-navbar" class="navbar navbar-expand-md navbar-dark sticky-top">
<div class="container-fluid">
<!--100% of the screen-->
<a id="logo" href="#top"> <img src="Images/logo.svg" alt="Website logo"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="#about">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a> </li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a> </li>
</ul>
</div>
</div>
</nav>
<div id="about" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="portfolio" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="contact" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
Failed to change the currently active bootstrap navbar list item text color on click?
I finally found the solution and here it is:
By changing the jQuery code from this:
$(document).ready(function () {
$('#nav li a').click(function(e){
e.preventDefault(); // This does not allow to load the relative page to the nav item.
$('#nav li').removeClass('active');
$(this).addClass('active');
});
});
to this:
$(document).ready(function () {
var pathname = window.location.pathname;
if (pathname == '/')
$('.navbar-brand').css("color", "rgb(32, 42, 62)", "background-color", "#D3212D");
else
$('#nav > li > a[href="' + pathname + '"]').parent().addClass('active');
});
I was able to fix my problem :)
Bootstrap 3, change li.active for nav
For the logo brand you can add an id to the navbar-brand
element and that will give it higher css specificity.
#myBrand {
color: #da212f;
text-shadow: 2px 2px 2px #DDD;
}
For the active link you use the following
.nav.navbar-nav > li.active a{
background: none;
background-color: #da212f;
color: #fff;
}
#myBrand { color: #da212f; text-shadow: 2px 2px 2px #DDD;}
.nav.navbar-nav > li.active a{ background: none; background-color: #da212f; color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a id="myBrand" class="navbar-brand" href="index.html">Mr. Robot</a> </div>
<!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li> <li><a href="#">Hardware</a></li> <li><a href="#">Robots</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav>
Change the nav-item background color not working
Target the active nav-item like this:
.nav-item.active > a{
}
Then you can add css styling into it.
Before you weren't selecting the element properly.
What you desired:
.nav-item.active > a {
color: aqua;
}
.nav-item > a:hover {
background-color: chartreuse;
}
See codepen: https://codepen.io/koder613/pen/ZEWNEgw?editors=1100
How to Change Background Color of Bootstrap Navbar
.navbar-light {
background-color: yellow !important;
border: none !important;
border-width:0!important;
}
Related Topics
CSS (Transition) After a Pseudo Element - How to Transition Content That Shows on Hover
What's the Difference Between @Import and @Use SCSS Rules
Using Nth-Child in Tables Tr Td
CSS Animations - Change a Property Without a Transition
How to Change the Play Icon of Embedded Youtube Videos
Left Aligned and Centered Grid with Flexbox
Text-Align: Justify and Images
How to Make Element Fill Remaining Width, When Sibling Has Variable Width
Why Is My CSS Not Updating in Web Browser
Force Visible Scrollbar in Firefox on MAC Os X
How to Exclude a Tag from CSS Class
How to Get a Floating-Div to Fill Available Space Within Its Parent Div
How to Style a List of Checkboxes
Full Height Sidebar and Full Height Content, Fluid Layout
How Bad Is It in Practice to Over-Nest Selectors in SASS/Scss