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>
Related
<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.
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>
I am working on horizontal navbar with collapsible menu. I am using bootstrap 4 and angular. Collapsing/showing is working fine on menu icon click, but I want to bind some CSS transitions (changing height slowly). My simple code is here:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">SOME BRAND</a>
<button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" (click)="toogle();" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="menu" [ngClass]="activeClass ? 'show' : 'collapse'" data-parent="#toggler">
<ul class="navbar-nav ml-auto">
<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="#">Link</a>
</li>
</ul>
</div>
</nav>
My CSS is:
.on-slide-down {
height: 500px;
}
#menu {
transition: height 1.5s ease;
height: auto;
overflow: hidden;
}
And JS function is:
toogle(){
this.activeClass = !this.activeClass;
let menu:HTMLElement = document.querySelector("#menu");
menu.classList.toggle("on-slide-down");
}
So my idea is to dynamically bind the class .on-slide-down which increase height. Unfortunately, the transitions is not working. Collapsing and showing the menu has still it's default behaviour. I was doing it according this example, but I dont know where is the problem.
Why not just override the normal Bootstrap collapse transition? This way you don't need the extra JS:
https://www.codeply.com/go/WJmJoNIlbA
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">SOME BRAND</a>
<button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="menu" data-parent="#toggler">
<ul class="navbar-nav ml-auto">
<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="#">Link</a>
</li>
</ul>
</div>
</nav>
CSS:
#menu {
transition: height 1.5s ease;
}
Hi I am wondering how to move my navbar contents to the right. So far by default they are to the left.
<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 class="nav-item active">
<a class="nav-link" href="#">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link active" href="#">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Since bootstrap4 use flexbox, you can use justify-content-end class to align items at right:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-end">
<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-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link active" href="#">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Another option is adding margin-left:auto (ml-auto) to both your button and ul class="navbar-nav" as following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler ml-auto" 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 ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link active" href="#">Portfolio</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
You have many possibilities.
.navbar { float: right;}
or
.navbar { text-align: right;}
Here is 2 solutions :
JsFiddle - align navbar to the right
Good luck
Just add .ml-auto
like this
<ul class="navbar-nav ml-auto">
Play here
.navbar-collapse{
justify-content: flex-end
}
or can use this
.navbar-collapse{
direction: rtl;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="text-align: right;">
...
</nav>
Use this code
.navbar{ text-align:right;}
I have problem with collapsed navbar in Bootstrap4.
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class=" navbar-brand" href="#myCarousel">
<img src="image/logo.svg" height="50">
</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#2" data-toggle="collapse" data-target=".navbar-collapse.show">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#4" data-toggle="collapse" data-target=".navbar-collapse.show">Contact</a>
</li>
</ul>
</div>
</nav>
Of course ihave added right id to another elements, like:
<div class="container marketing" id="2">
Menu doesn't work. When i click on element of navbar, menu close but doesn't move to right site.
When delete collapse's attributes:
data-toggle="collapse" data-target=".navbar-collapse.show"
menu doesn't close on click but move to right site.
Thanks :)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class=" navbar-brand" href="#myCarousel">
<img src="image/techNET.svg" height="50">
</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#2" data-toggle="collapse" data-target=".navbar-collapse.show">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#3" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#4">Contact</a>
</li>
</ul>
</div>
</nav>