BootStrap - Change hover color list - navigation bar
I am trying to change the background color and text color of links in the navigation bar on hover, however I cannot get it to work. No matter what I do there, there seems to be no effect.
I've never had a problem using Pure CSS, but its just mostly with Bootstrap. I have this problem.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Soni Computer Repair</title>
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="logo">
<center>
<a class="navbar-brand" href="#"><img src="Final.png"/></a>
</center>
</div>
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<h6 class="text-center">Copyright © Soni Computer Repairs</h6>
<p class="text-center">www.SoniRepairs.com</p>
</div>
</footer>
</body>
</html>
CSS
.nav, .navbar-nav {
display: inline-block;
margin:0;
float:none;
margin-top: -15px;
}
.navbar-nav li {
padding-left: 40px;
padding-right: 40px;
}
.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
color: cyan;
}
.navbar-brand {
float: none;
}
.navbar-center {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:100%;
}
.navbar .navbar-collapse {
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #f5f5f5;
}
.logo img {
height:80px;
margin-top: -15px;
}
.logo {
width: 40%;
margin: 0 auto;
}
@media screen and (max-width: 700px) {
.navbar-nav{
margin-left: auto;
margin-right: auto;
display: table;
table-layout: fixed;
float:none;
margin-top: 10px;
}
.container img {
height:50px;
display: inline-block;
margin-top: -15px;
}
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar > .container {
text-align: center;
}
.collapse.navbar-collapse {
width: auto;
clear: none;
}
}
source to share
The html code shows navbar-static-top
<div class="navbar navbar-inverse navbar-static-top"></div>
and in your css you are using .navbar-fixed-top
.navbar .navbar-inverse .navbar-fixed-top > li > a:hover {
color: cyan;
}
Updated fiddle https://jsfiddle.net/3ge0b6nr/1/
Change your code to
.navbar.navbar-inverse.navbar-static-top li > a:hover {
color: cyan;
}
source to share
Here is a jsFiddle example based on your code.
Just add this one css code
to your css
:
.navbar-inverse .navbar-nav > li > a {
color: red;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:active,
.navbar-inverse .navbar-nav > li > a:focus{
color: green;
background-color: red;
}
Just change it to whatever color you want.
source to share