I am a newbie and cannot figure out how to get my links to float to the right:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
<ul class="navbar-right">
<li>Home</li>
<li>About Me</li>
<li>Get in Touch</li>
</ul>
</div>
</div>
Can someone please help me figure this simple task out?
Try below code
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About Me</li>
<li>Get in Touch</li>
</ul>
</div>
</nav>
Take a look at the example "Right-Aligned Navigation Bar" of Right Navigation
Right navigation is aligned by changing
class="nav navbar-nav" to class="nav navbar-nav navbar-right"
Hope this helps you.
Related
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
I am working with the Bootstrap 4 default navbar and I just want to add a collapsing menu that is positioned on the right, not the left, when not collapsed.
I have tried adding text-right and float-right, but neither are actually moving the menu to the right.
Here is a bootply showing the issue.
Here also is a snippet, since StackOverflow wants me to use one, though I don't think it'll be wide enough to show the non-collapsed menu:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse float-right">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
Add ml-auto class to ul tag containing menu
<ul class="nav navbar-nav ml-auto">
<li class="active nav-item">
Homes
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
The element .collapse.navbar-collapse requires .justify-content-end class as it is positioned with flex (display: flex) and takes full remaining width of your navbar.
The other answers with .ml-auto are perfectly valid. The difference between these two is that .justify-content-end will make all elements inside navbar-collapse stick to the right, whereas .ml-auto will only do the same for the ones inserted after your ul.nav.nav-bar, so the ones on the left can still stick to the left. You can choose the one most appropriate to you, and feel free to combine these two for more sophisticated layouts.
Your updated Boolply can be found here.
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
add .navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;} in your style sheet. thanks
.navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto"> <!-- here -->
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
On the picture is right side of my site. Some elements out from bootstrap grid.
<div class="container">
<div class="col-md-12">
<div class="row">
First
<nav class="main_menu clearfix">
<button class="main_menu_button hidden-md hidden-lg"><i class="fa fa-bars"></i></button>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
</div>
</div>
Why element nav can out from bootstrap grid? My main part is gray
Not really sure what is wrong with your markup or style, it's hard to understand from the given content, but you should put .col-md-12 inside of .row not the other way around.
Here are some examples: https://getbootstrap.com/examples/grid/
I would definitely familiarize yourself with how the HTML and CSS classes should be structured with bootstrap. You will need to start with a container class(eg. class="container"). Inside the container goes rows (class="row"), and inside the rows is your columns(eg. class="col-md-12").
Check out this page: http://getbootstrap.com/css/
If you are looking to build a nav out in bootstrap you do not necessarily need to re-invent the wheel and can use their Navbar Template: http://getbootstrap.com/examples/navbar/
Possibly something like this would work for you:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-xs-3">
First
</div>
<div class="col-xs-9">
<nav class="main_menu clearfix">
<button class="main_menu_button hidden-md hidden-lg">menu</button>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
You should try using bootstrap4 class.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="brand" href="#">
<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="nav navbar">
<li class="nav-item"><a class="nav-link" href="#">Home</li>
<li class="nav-item"><a class="nav-link" href="#">career</li>
<li class="nav-item"><a class="nav-link" href="#">Contact</li>
<li class="nav-item"><a class="nav-link" href="#">about</li>
</ul>
</div>
</nav>
in case of you want to have vertical navigation then in nav tag remove the navbar-expand class.
I am building a responsive site with Bootstrap. The site has a fixed nav bar. It works great on desktop. However, when the site is running on a mobile device, the icons in the upper right disappear. My code looks like this:
<div id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<img src="/logo.png">
</div>
<div class="navbar-header navbar-right">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a id="viewButton" data-toggle="tooltip" data-placement="bottom"><span class="glyphicon glyphicon-print"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-arrow-right"></span>
</a>
<ul class="dropdown-menu" role="menu">
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
How can I right-align buttons in the navbar when in mobile view?
Thanks!
Hi you have to remove the collapse classes from the div.
http://www.bootply.com/F6jMrwYOQQ#
<div id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<img src="/logo.png">
</div>
<div class="navbar-header navbar-right">
<div class="navbar">
<ul class="nav navbar-nav navbar-right">
<li><a id="viewButton" data-toggle="tooltip" data-placement="bottom"><span class="glyphicon glyphicon-print"></span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-arrow-right"></span>
</a>
<ul class="dropdown-menu" role="menu">
</ul>
</li>
</ul>
</div>
</div>
</div>
You can try to remove the collapse class here
<div class="navbar-collapse collapse">
I have got a problem with rows which are overlapping in this following code:
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar navbar-fixed-top ">
<a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
Site.com
</a>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
<li>NL</li>
<li>ENG</li>
<li>SP</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="row">
<div class="col-md-6"><h1>This is my header</h1></div>
<div class="col-md-6"><img src="img/MyPicture.JPG" height="300"></div>
</div>
In my browser the last rows lies over the navbar. Could it be that it has got something to do with the second row being outside the container? If so where should I define the container.
Here is the jsfiddle text: http://jsfiddle.net/L9GJE/
Wrap <div class="row"> with a <div class="container">
e.g.
<div class="container">
<div class="row">
....
</div>
</div>
So whenever you use the navbar you'll need to keep in mind that it is fixed and you will need to add margin or padding from the top so your rows won't overlap.
Your navbar is fixed, so, you need to add margin-top to second row.
Your navbar was not made correctly, here is the correct usage of the navbar class:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</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 navbar-nav">
<li class="active">Link</li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>This is my header</h1>
</div>
<div class="col-md-6">
</div>
</div>
</div>
I know this is an issue many have had, but not being familiar with Less and being new to Bootstrap, I am looking to an all CSS solution for keeping my navbar from collapsing below 768 px:
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid header-top">
<ul class="navbar-nav navbar-left list-inline contact-links">
<li><span class="glyphicon glyphicon-earphone"></span></li>
<li></span></li>
<li><span class="glyphicon glyphicon-envelope"></span></li>
</ul>
<ul class="navbar-nav navbar-right list-inline account-and-cart-links">
<li><span class="glyphicon glyphicon-user"></span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span></li>
</ul>
</div>
</div>
Add pull-left and pull-right to the <ul>'s.
JSFiddle
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid header-top">
<ul class="navbar-nav navbar-left pull-left list-inline contact-links">
<li><a href="tel:180042762687"><span class="glyphicon glyphicon-earphone">
</span></a></li>
<li></span></li>
<li><span class="glyphicon glyphicon-envelope"></span></li>
</ul>
<ul class="navbar-nav navbar-right pull-right list-inline account-and-cart-links">
<li><a href="my-account.html">
<span class="glyphicon glyphicon-user"></span></a></li>
<li><a href="my-cart.html">
<span class="glyphicon glyphicon-shopping-cart"></span></a></li>
</ul>
</div>
</div>