<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Jerrica</a>
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</nav>
**CSS**
body{
width:100%;
height:100%;
}
nav{
background:black;
height:10vh;
/* Align logo in center */
display:flex;
justify-content:center;
}
a:link {
color: white;
background-color: transparent;
text-decoration: none;
}
.a {
font-family: "Helvetica", "Arial", "Verdana";
}
My hamburger toggler bar is giving me problems because my text does not appear there. I believe that when I configured my toggler navigation bar's CSS, it obscured the content in my hamburger menu.
Indent your code so you can easily check the blocks of code that you haven't closed properly.
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Jerrica</a>
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Pricing</a>
</div>
</div>
</div>
</nav>
</body>
When you do this you will notice that you have closing li and ul tags that don't have corresponding opening tags and that you are missing 3 div closing tags.
In this fiddle you can check how your menu looks with all the blocks properly closed.
Related
I want to change the color it shows on hovering in my navbar. I have the Navbar with a black background and text with #b3b3b3 color. I want it that if you hover over the text it will turn white, instead of the #b3b3b3 color, but all the CSS I tried doesn't seem to work.
this is my code:
<nav class="navbar navbar-expand-lg" style="background-color: #121212">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs- target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria- label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="#">Home</a>
<a class="nav-link" aria-current="page" href="#">Home</a>
<a class="nav-link" aria-current="page" href="#">Home</a>
<a class="nav-link" aria-current="page" href="#">Home</a>
</div>
</div>
</div>
</nav>
div.navbar-nav {
--bs-nav-link-color:#b3b3b3;
--bs-nav-link-hover-color:white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg" style="background-color: #121212">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs- target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria- label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="#">Home</a>
<a class="nav-link" aria-current="page" href="#">Home</a>
<a class="nav-link" aria-current="page" href="#">Home</a>
<a class="nav-link" aria-current="page" href="#">Home</a>
</div>
</div>
</div>
</nav>
You can change values of variables
The elements of my navbar seem to be stuck outside of it. I'm not sure why?
Here's my code:
<nav class="navbar navbar-expand-lg navbar-inverse"></nav>
<div class="container-fluid">
<div class="navbar-header">
<a
style="color: black; text-decoration: none; font-size: 2rem;"
class="navbar-brand"
href="#"
>name<span class="fas fa-microscope fa-1x"></span
></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="material-icons">menu</i>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">Protect</li>
<li class="nav-item">About</li>
</ul>
</div>
</nav>
.nav a{
color: white !important;
font-size: 20px;
}
.navbar-brand{
color: white !important;
font-size: 20px;
font-family: sans-serif;
}
And here's what the navbar looks like:
website
Does anyone know how to fix this? (Also does the menu icon have a white background and is black, whereas the microscope icon has an invisible bg and is white?)
Thanks!
You close the navbar in the beginning, so remove the </nav> tag from your first line.
Remove 2nd line, it is unnecessary code here.
Assign class "nav-link" for "Protect" & "About menu".
<nav class="navbar navbar-expand-lg navbar-inverse">
<div class="navbar-header">
<a
style="color: black; text-decoration: none; font-size: 2rem;"
class="navbar-brand"
href="#">name<span class="fas fa-microscope fa-1x"></span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="material-icons">menu</i>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Protect</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</nav>
This question already has answers here:
Change navbar color in Twitter Bootstrap
(12 answers)
Closed 2 years ago.
I want to change the font color of the Nav Bar to white, but I'm having trouble identifying the correct CSS class to call out to do so. 'Navbar' on the top left is already white because of Bootstraps' CSS, but I want to change 'Contact', 'Portfolio' and 'About' to white also.
HTML
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"> Contact <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
CSS
.nav-item{
color:white
}
use:
<nav class="navbar navbar-light bg-primary">
and add
text-white
In your main "nav class" you have select "bg-primary" try this
For overall text color in a navbar, there are two classes: navbar-dark and navbar-light.
navbar-dark has a base color of white. navbar-light has a base color of black, with a 90% opacity.
Navbar links have reduced opacity, so they will neither be completely black or completely white.
To force all link colors to white, you can target the .nav-link rule, like this:
.navbar-dark .navbar-nav .nav-link {
color: white;
}
A working example:
<!-- navbar-dark with link text forced to white -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- insert this style *after* linking Bootstrap -->
<style>
.navbar-dark .navbar-nav .nav-link {
color: white;
}
</style>
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler mr-5" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"> Contact <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
This question already has answers here:
Bootstrap 4 centered navbar
(2 answers)
Center an element in Bootstrap Navbar
(10 answers)
Centering the navbar content in Bootstrap 4 (alpha 5)
(2 answers)
How to center nav-items in Bootstrap? [duplicate]
(3 answers)
Closed 4 years ago.
Using this bootstrap code and can't make it to center...
Trying: float: center, text-align: center but it doesn't work
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Add justify-content: center; to your navbarNav id.
Bootstrap has a helper class for that to add to the navbar which is
justify-content-center
Here's a link to the documenation: http://getbootstrap.com/docs/4.1/utilities/flex/
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
This could do the trick. Take a look at the code below:
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
.navbar-brand {
margin-top: -2px; /* to set it to the same position (height) as the nav-items */
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li>
<a class="navbar-brand" href="#">Navbar</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
You have to switch to the expanded view (Full page) to see the result.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
replace this line with below line
<nav class="navbar navbar-expand-lg navbar-light bg-light text-center" style="display:block;">
I hope it's working fine.
I'm having a play around with Bootstrap 4, more specifically the navbar menu. Is there is a way I can make the little navbar toggle button align to the right of the page rather than have it floating to the left next to the logo?
This is my current code.
#media (min-width: 992px) {
.navbar-nav li a { line-height: 85px; }
}
#media (max-width: 991px) {
.navbar-brand { float: none; }
}
.navbar-toggler{
border:none;
width:1em;
}
<nav class="navbar navbar-light bg-faded navbar-full">
<a class="navbar-brand" href="#"><img class="img-fluid" src="img/logoMedium.png" /></a>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Solar Power</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">No Obligation Quote</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
Thanks for the help :)
just add the class ml-auto to your toggle button
in that way you make margin-left:auto
<button type="button" class="navbar-toggler ml-auto hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
Use .float-xs-right class:
<button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
Or add float: right; to .navbar-toggler as the below snippet:
Note that pull-right has been removed in v4.
#media (min-width: 992px) {
.navbar-nav li a {
line-height: 85px;
}
}
#media (max-width: 991px) {
.navbar-brand {
float: none;
}
}
.navbar-toggler {
border: none;
width: 1em;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-light bg-faded navbar-full">
<a class="navbar-brand" href="#">
<img class="img-fluid" src="img/logoMedium.png" />
</a>
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Solar Power</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">No Obligation Quote</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
Put the class pull-right and you'll get the result that you're looking for.
<button class="navbar-toggler hidden-lg-up pull-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
or you can define a style with the following parameters:
float: right !important;
try this piece of code:
.navbar-toggler {
margin-left: 90% !important;
}
This is how I solved this:
<header>
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Fixed top</a>
<button type="button" class="navbar-toggler hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="clearfix"></div>
<div class="collapse navbar-toggleable-xs" id="navbarResponsive">
<ul class="nav navbar-nav">
<li class="nav-item active">
Home<span class="sr-only">(current)</span>
</li>
<li class="nav-item">
Planets
</li>
<li class="nav-item">
Spaceships
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</nav>
</header>
Note that you have to use the clearfix, because otherwise the float from the button would do funky things to the menu while it's collapsing.
This is what works for me in Bootstrap 4
<button type="button" class="navbar-toggler navbar-toggler-right"
data-toggle="collapse" data-target=".navbar-collapse"
aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
or even simpler from Bootstrap docs
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
.navbar-light .navbar-nav .nav-link {
color: rgb(255, 255, 255) !important;
}
.navbar {
display: block !important;
min-height: 54px;
}
.pull-right{
float:right !important;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: #de7a22 !important;">
<button class="navbar-toggler pull-right" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-home"></i><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Home</a></li>
<li class="nav-item">
<a class="nav-link" href="#">About</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Sponsorship</a></li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a></li>
</ul>
</div>
</nav>
</body>
You have to align it just like another button tag, first wrap it inside a container to be able to move it later, after that create a div with .text-right class and then put your toggle button inside. See the example below.
<div class='container'>
<div class='text-right'>
<button> Button1 </button>
</div>
</div>
or
<div class='container text-right'>
<button> Button1 </button>
</div>enter code here
Both solutions work perfectly in Bootstrap 4.5
Just use navbar-expand-lg and your problem will going to solve.
It should look like this:
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
I couldn't get any of the above solutions to work. So this simple hack does the job:
HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<div class="container-fluid">
<div class="row d-inline">
<div class="col">
<a class="navbar-brand" href="{% url 'home' %}">
<img src="{% static 'img/logo.png' %}" alt="Logo" height="100" class="d-inline-block">
<span class="fs-2">Abstract Spacecraft</span>
</a>
</div>
<div class="col">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" id="as-navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
CSS:
#as-navbar-toggler {
position: absolute;
right: 5px;
top: 5px;
height: 35px;
padding: 0px;
}
Result (in Chrome's iPhone5 screen emulator):
What's nice about this is because there's 0 padding, it rides nicely over the default (centered) page title.
In bootstrap 5 you can just do this :
add the class 'ms-auto' and your toggler will shift from left to right
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>