I'm working on a navbar with bootstrap and the hover effect in css isn't working and i added the hover pseudo class to my anchor tag
<!DOCTYPE html>
<html>
<head>
<style>
li a:hover{
background-color: green;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse mynav">
<div class="collapse navbar-collapse navHeaderCollapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active nav-item">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Work</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
when you want to customize bootstrap elements use the !important attribute in your css like so
li a:hover{
border-bottom: 2px solid blueviolet !important;
background-color: ;
}
Related
Hi I want to change the font color of the bootstrap navbar links and already tried setting a specific class to the navbar like those suggested in other posts similar to this. However, I only managed to change the font of the navbar brand. Can you give any suggestions? Is there a problem with my specificity?
header{
margin-top: 1em;
}
.navbar-main{
background-color: #00cc99;
}
.navbar .navbar-www{
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-default navbar-main">
<div class="container">
<div class="navbar-header">
Kau Unlimited
</div>
<ul class="nav navbar-nav navbar-www">
<li>About</li>
<li>Services</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</nav>
I'm still an absolute beginner at coding and trying to avoid !important and still learning on specificity.
Thank you!
header{
margin-top: 1em;
}
.navbar-main{
background-color: #00cc99;
}
.navbar-www li a{
color: white !important;
<header>
<nav class="navbar navbar-default navbar-main">
<div class="container">
<div class="navbar-header">
Kau Unlimited
</div>
<ul class="nav navbar-nav navbar-www">
<li>About</li>
<li>Services</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</nav>
</header>
Try to avoid !important as it is a bad habit. You can override the bootstrap CSS by adding some extra classes to your navbar or may be any ID.
Here is what you can do to change the navlink text color
.navbar-www.navbar-brand li a{
color:#fff;
}
If this doesn't override, try to add some id in you navbar and make your css code something like this.
#navbar.navbar-www.navbar-brand li a{
color:#fff;
}
You can easily check in the console, what is the styling of the nav link bootstrap. You can override this by adding one extra selector, either it is class, attribute, id, or any parent selector.
You need to add color for link please replace .navbar .navbar-www this with .navbar .navbar-www a please check below
header{
margin-top: 1em;
}
.navbar-main{
background-color: #00cc99;
}
.navbar .navbar-www a{
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-default navbar-main">
<div class="container">
<div class="navbar-header">
Kau Unlimited
</div>
<ul class="nav navbar-nav navbar-www">
<li>About</li>
<li>Services</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</nav>
float: left;
and
display: inline;
are both failing to work.
What am I doing wrong? How can I make this navigation bar horizontal?
.navbar li {
margin: 5px;
padding: 0;
width: 80px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active">Contact</li>
</ul>
</div>
</nav>
put your css inside style tags or an external css file and include it in the header section of your html
<style>
ul li{ display: inline;}
</style>
try the following code snippet, it might help you
.navbar li {
margin: 5px;
padding: 0;
width: 80px;
float: left;
list-style-type : none;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About </li>
<li id="navbar" class="active">Portfolio </li>
<li id="navbar" class="active">Contact </li>
</ul>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Changed
.navbar li {
to
li.navbar {
li.navbar {
margin: 5px;
padding: 0;
width: 80px;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active">Contact</li>
</ul>
</div>
</nav>
Is this what you are looking for?
Solved:
The
<li id="navbar" class="active">Home</li>
elements need the corresponding CSS to be
#navbar
and NOT
.navbar li
.navbar li should be used in the CSS for the html class attribute class="navbar li" whereas #navbar should be used the ID attribute
When I changed that, the CSS styling was applied to the html with the corresponding id attribute.
It seems you're doing things the right way, but your code sample misses some tags :
<html>
<head>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Simmo Simpson</a>
</div>
<ul class="nav navbar-nav">
<li class="navbar-link" class="active">Home</li>
<li class="navbar-link" class="active">About</li>
<li class="navbar-link" class="active">Portfolio</li>
<li class="navbar-link" class="active">Contact</li>
</ul>
</div>
</nav>
<style>
.navbar li {
margin: 5;
padding: 0;
width: 80;
float: left;
}
</style>
</body>
</html>
will do the trick. You have to say to the browser, what it have to do with those lines : use Html <html> and apply that style using <style> . If your style directives have to be more important, I think that it could be a better way to create a second file that will contains all your css and to link it with your html document.
EDIT :
The css rule : .navbar li will find the navbar class and find all its li childs, so you can remove ids on each li and replace them by a class name
I hope it may help
I'm trying to change the navbar's background color to blue and the links color to white. I am not able to change the links on the navbar to white. I'm not doing something right. Not sure what. Appreciate the help!
.navbar-default {
background-color: #2196f3;
}
.navbar a{
color:white;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap/css/index.css">
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Shop</li>
<li>Drive</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode</li>
<li>Help/FAQ's</li>
<li>Conatct us</li>
</ul>
</div>
</nav>
<script src = "js/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
You need to be more specific with your CSS rules. See Specificity
Working Example:
.navbar.navbar-default {
background-color: #2196f3;
}
.navbar.navbar-default ul > li > a,
.navbar.navbar-default .navbar-brand {
color: white;
}
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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 class="navbar-brand" href="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-left">
<li>Shop
</li>
<li>Drive
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode
</li>
<li>Help/FAQ's
</li>
<li>Conatct us
</li>
</ul>
</div>
</div>
</nav>
Bootstrap have many default style.
You code is not working is because bootstrap override your css(same as #Kirito mention).
You can change css to this, it work:
.navbar div{
background-color: #2196f3 !important;
}
.navbar a{
color:white !important;
}
However, better solution is customize your bootstrap. link: http://getbootstrap.com/customize/
This approach will get cleaner code and less problem
Remove the .navbar a rule set and add:
/* change brand text color */
.navbar-default .navbar-brand
{
color:white;
}
/* change list links text color */
.navbar-default .navbar-nav > li > a
{
color:white;
}
You need to be more specific about your selectors or other selectors (defined in bootstrap's CSS) will apply as they are likely more specific
This is all better explained in the specificity rules
See sample code below.
nav.navbar-default {
background-color: #2196f3;
background-image: none;
}
nav.navbar-default .navbar-brand,
nav.navbar-default .navbar-nav>li>a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Shop
</li>
<li>Drive
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Zipcode
</li>
<li>Help/FAQ's
</li>
<li>Conatct us
</li>
</ul>
</div>
</nav>
</html>
I"m trying to make a bootstrap nav bar like this :
I could manage only this one:
And here is my code:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
.nav{
position: absolute;
top: 5px;
right: 190px;
border-left: 3px solid #EEE;
border-right: 3px solid #EEE;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img src="./imgs/endorse-logo1.png" alt="logo">
</div>
<div class="navbar-header nav">
<ul class="nav nav-pills">
<li class="dropdown">
English<b class="caret"></b>
<ul class="dropdown-menu">
<li>Russian</li>
<li>Chinese</li>
<li>German</li>
<li>Italian</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
It isn't even responsive. How can I make a responsive nav bar properly?
If you take a look at the official documentation you will see that there is a lot of mistakes in your code:
you have two navbar-header element, you should have only one, and multiple <ul class="nav navbar-nav"> elements,
you need to wrap your navbar elements (<ul class="nav navbar-nav">) in a <div class="collapse navbar-collapse"> element in order to make it responsive,
you can get rid of your .nav css to fix the navbar top as you are already using navbar-fixed-top,
you are using <ul class="nav nav-pills"> where you should directly use <a class="dropdown-toggle">
etc...
Maybe you should retry to create the navbar from the beginning by following precisely the documentation.
I'd like to override the font color when I hover over a tab/link on my navbar. I currently have the following HTML:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class = "container">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
</ul>
<ul class ="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li >Link</li>
</ul>
</div>
</div>
</div>
I just would like the tabs on the right to turn a different color. I understand pseudoselectors, I'm just wondering how I'd properly do this with my own CSS. Thanks!
If the selector is specific enough, you can avoid usage of !important. In this case, you would use:
.nav.pull-right > li > a:hover {
/* style .. */
}
jsFiddle example
Alternatively, you could also use .navbar-inner .container .nav.pull-right > li > a:hover