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>
Related
In Bootstrap 3 it was possible to do this:
The effect was to apply a solid background colour (orange in this case) on to an <li> element inside .navbar
An example fiddle is here: https://jsfiddle.net/p1vm4aeo/
The only custom CSS is the orange background, the rest is Bootstrap 3:
.orange-bg {
background-color: orange;
}
Markup is as follows:
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div id="navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown orange-bg">
Foo
</li>
</ul>
</div>
</nav>
Again this is all standard Bootstrap 3 markup, with the addition of .orange-bg.
In Bootstrap 4 this doesn't seem to be achievable because the <li> inside .navbar doesn't occupy the full height of the navbar. The effect is like this:
Fiddle for it is here: https://jsfiddle.net/20ehqxsy/
The only difference in the markup is that the Navbar classes are appropriate to Bootstrap 4 instead of 3 (.navbar-expand-lg for instance):
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light navbar-default" role="navigation">
<div id="navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown orange-bg">
Foo
</li>
</ul>
</div>
</nav>
Is there any way to get the same effect that's possible in Bootstrap 3 when using Bootstrap 4?
A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens).
You need to use bootstraps utility/spacing to achieve the desired result.
Also, notice the use of nav-link class inside li.
This is a considerably cleaner approach, without overriding bootstraps default css.
.orange-bg {
background-color: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar p-0 fixed-top navbar-expand-sm navbar-light bg-light navbar-default" role="navigation">
<div id="navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item dropdown orange-bg">
<a class="nav-link" href="#">Foo</a>
</li>
</ul>
</div>
</nav>
Your .navbar element has:
.navbar {
...
padding: .5rem 1rem;
}
So simply set this to 0, and apply the same value to your most element-local element; for ease of illustration I have used .dropdown but you can use .navbar-nav > li, etc. :
.dropdown {
...
padding: .5rem 1rem;
}
.navbar {
padding: 0;
}
This gives the required result.
Please see this Fiddle: https://jsfiddle.net/tpv79kyr/
Just apply padding:0 to nav as it takes padding:16px. Below is the working tested solution
To make your navbar responsive and collapsible you can use .navbar-expand-xl|lg|md|sm refer to Navbar
nav {
padding: 0px!important;
}
.orange-bg {
background-color: orange!important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar fixed-top navbar-expand navbar-light bg-light navbar-default" role="navigation">
<div id="navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown orange-bg">
Foo
</li>
</ul>
</div>
</nav>
</body>
</html>
I'm having a lot of trouble adding a fixed black background to my bootstrapped navbar. In my CSS, I declared the background-color as black, but it doesn't seem to change anything. My own CSS is declared after bootstrap's core CSS, so it wouldn't be overridden by a default color. The nav bar shows as transparent, with opaque lettering. Not sure what the problem is, especially since I already declared the color of the navbar!
Here is the HTML for the navbar:
<div class="jumbotron">
<div class="container">
<nav class="navbar fixed-top">
<div class="navbar-fixed-top container">
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav
And here is my CSS. Please help. I am going insane.
.jumbotron navbar-fixed-top container{
background: #2E2F31;
position: fixed;
width: 100%;
}
.navbar .navbar-nav li a {
color: white;
font-size: 16px;
}
.navbar .navbar-nav li a:hover {
background: #BFC1C3;
}
.navbar .navbar-nav .dropdown-menu li a:hover {
background: #BFC1C3;
}
change your css from .jumbotron navbar-fixed-top container to .jumbotron .navbar-fixed-top.container I updated your code check here
.jumbotron .navbar-fixed-top.container{
background: #2E2F31;
position: fixed;
width: 100%;
}
.navbar .navbar-nav li a {
color: white;
font-size: 16px;
}
.navbar .navbar-nav li a:hover {
background: #BFC1C3;
}
.navbar .navbar-nav .dropdown-menu li a:hover {
background: #BFC1C3;
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar-inverse jumbotron">
<div class="container">
<!-- Header -->
<nav class="navbar fixed-top">
<div class="navbar-fixed-top container">
<div class="navbar-header">
<button type="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="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
I think this is exactly what you need
<head>
<link rel="stylesheet" href="farji.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class=" jumbotron">
<div class="container">
<!-- Header -->
<nav class="navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="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="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home <span class="sr-only">(current)</span></li>>
<li>About</li>
<li>
Personal Projects<span class="caret"></span>
</li>
<li>Bullet Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</body>
OPTIONAL--and if you want to change it even further with any other color use the following css:
.navbar-inverse {
background-color: #122c46;
border-color: #122c46;
}
I'm testing the bootstrap navbar and how I do not know much about styles. When I click the icon, a dotted frame appears outside the image boundary, as follows:
image result
I know this is related to the page style, but do not know how to solve. Below is the exact code I'm using:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="lib/img/mig.png">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
</button>
<h1 class="navbar-header" href="#">Home</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
<br>
<ul class="nav nav-pills navbar-right">
<li class="active">
Home
</li>
<li class="">
About
</li>
<li class="">
Contact
</li>
<li class="">
Maps
</li>
</ul>
</br>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<body>
</body>
</html>
This wheel is standard browsers to "links"
To resolve you have two options
- Include it in your tag
a: active {
outline: none;
}
Include a height with the same height as your image
.navbar-brand {
height: 60px;
}
Helped?
Try to add this rule in your css file
a {
outline: none;
}
source: css tricks
The first posted answer may solve the problem, but it would also affect every anchor tag on the page, which seems a bit overkill.
I'd suggest this instead:
.navbar .navbar-brand:focus {
outline: none;
}
Does anyone know how to change the navbar such that there's less white space above/below the text. I already tried creating a negative buffer but that didn't seem to work.
Also if anybody knows how to change the navbar to a button(as often mobile sites have) so that it doesn't take up the entire height of the page that would be useful.
.navbar-nav>li {
float: none;
}
.navbar-default {
background-color: rgba(255, 255, 255, 0);
border-width: 0px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
background-color: rgba(150, 155, 155, );
}
.navbar {
margin-bottom: 0 !important;
}
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<link href="Calums2.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<body>
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<div class="navbar navbar-default">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><h2>Home</h2></li>
<li><h2>Team</h2></li>
<li><h2>Kyrgyzstan</h2></li>
<li><h2>Blog</h2></li>
<li><h2>Expeditions</h2></li>
</ul>
</div>
</nav>
<style>
text-align:justify;
</style>
</div>
</div>
</body>
This will do it.
ul.nav li a>h2 {
margin-top: 0;
margin-bottom: 0;
}
Here's a fiddle: https://jsfiddle.net/ypfhs1gn/1/
Also, to fix your HTML:
<div class="list" style="Position: absolute; top: 0px; left:0px;">
<div class="navbar navbar-default">
<nav class="navbar navbar-default">
<ul class="nav nav-justified navbar-nav">
<li><h2>Home</h2></li>
<li><h2>Team</h2></li>
<li><h2>Kyrgyzstan</h2></li>
<li><h2>Blog</h2></li>
<li><h2>Expeditions</h2></li>
</ul>
</nav>
</div>
</div>
UPDATE: Additionally, here's that fiddle updated to get you that menu button: https://jsfiddle.net/ypfhs1gn/2/
<nav class="navbar navbar-default">
<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>
</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 nav-justified navbar-nav">
<li><h2>Home</h2></li>
<li><h2>Team</h2></li>
<li><h2>Kyrgyzstan</h2></li>
<li><h2>Blog</h2></li>
<li><h2>Expeditions</h2></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I'd try setting up a CSS rule for nav > ul containing top/bottom margin and/or padding settings, starting from 0 and (if that has an effect) then changing it to a value you like.
I wrote a custom bootstrap header as shown in the screen shot:
I want that navbar to be moved to right so that it can suit the requirements like this.
I used external CDNs for bootstrap and jquery.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<body>
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="#"><img src="images/logo.png" alt="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS:
.navbar-fixed-top {
min-height: 80px;
}
.navbar-fixed-top .navbar-collapse {
max-height: 136px;
}
.navbar-collapse {
margin-top: 1%;
}
.navbar{
background-image: none;
}
#media (min-width: 768px) {
.navbar-fixed-top .navbar-collapse {
max-height: 50px;
}
}
#myNavbar {
background-color:#0067ac;
color:#16ac07;
border-radius:0;
}
Fiddler:
https://jsfiddle.net/z4b2bwg6/9/
How can I do it?
Just add the class .navbar-right to make the menu items float to the right - http://getbootstrap.com/components/#navbar-component-alignment
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>