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>
Related
This question already has answers here:
Change navbar color in Twitter Bootstrap
(12 answers)
Closed 1 year ago.
I have this navbar in all of bootstrap:
.navbar {
background-color: aqua;
}
<!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.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="boot.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="boot.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Subjects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
My problem is when i have the code in my boot.css file:
The background of the navbar is still the dark colour that was implemented in the nav tag. How can I override bootstrap css styling and customise my own.
You could try changing the color by using id. If you want to change many elements at once this may not be the best solution for you tho.
Simply add the id of your choice in this line (id="navigationID in this example):
<nav class="navbar navbar-expand-md bg-dark navbar-dark" id="navigationID">
Then declare the background color you want in css for this id:
#navigationID{
background-color:aqua !important;
}
Here is a working version of what i'm talking about
https://jsfiddle.net/q6fb7k5o/
You have to remove the bg-dark class from the <navbar> element, and replace it with one of the bootstrap background color classes, like .bg-primary or some other color. For example:
<nav class="navbar navbar-expand-md bg-primary navbar-dark">
Or you can make your own, such as:
.bg-aqua {
background-color: aqua !important;
}
and add it as a class to the <navbar>:
<nav class="navbar navbar-expand-md bg-aqua navbar-light">
Note: the navbar-dark and navbar-light classes will make the text in your navbar white or black, depending on which one you choose.
Here is the Bootstrap Navbar Color Scheme documentatation here.
bootstrap bg-dark has there own style with !important so that if you want to override bootstrap style you have to put more specification than bootstrap style or you can remove those bootstrap style.
see below details,
How can I override Bootstrap CSS styles?
Before Start, I have searched for the last few hours, found several replies but none that fixed this issue.
I only have one link, and I have a fixed to top navbar. I want the Link to stay on the same line as the Brand in mobile/smaller screens.
Right now on mobile (Ref image below):
I have tried floating it right to see if that helped, but it didn't.
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav">
<li class="active">1 Link Only<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-collapse.collapse {
display: inline-block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
You only need to delete collapse navbar-collapse classes and use a custom class. You can name it custom-navbar-nav. Finally, add the CSS showed here. If you definitely want your link on the top, you need to use media queries.
.navbar-header {
display: inline-block;
}
.custom-navbar-nav {
display: inline-block;
float: right;
}
<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">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a></div>
<div class="custom-navbar-nav">
<ul class="nav navbar-nav">
<li class="active">1 Link Only<span class="sr-only">(current)</span></li>
</ul>
</div>
</div>
</nav>
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 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;
}
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.