This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Bootstrap navbar align want align to the right
(6 answers)
Closed 2 years ago.
I am using the default Bootstrap navbar below:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
How can I align the last menu item (the drop down menu item) to the right? I want to leave the rest as it is, but align the last one to the right.
Thanks
Use w-100 on ul.navbar-nav and ml-auto on li.dropdown
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav w-100">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</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 dropdown ml-auto">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Related
I have a simple bootstrap 4 menu and would like to expand the submenu by default for mobile users. How would I accomplish this (first preference is for a CSS only solution)?
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="http://www.mywebsite.com"> <img src="https://www.mywebsite.com/logo.png" style="width:75px;"> My Website</a>
<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>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="~/">Home <span class="sr-only">(current)</span></a>
</li>
<!-- expand this menu by default for mobile users -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
sub menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="~/Page 1">Page 1</a>
<a class="dropdown-item" href="~/Page 2">Page 2</a>
<a class="dropdown-item" href="~/Page 3">Page 3</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="~/Page 4">Page 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Page 5</a>
</li>
</ul>
</div>
Add show to <li class="nav-item dropdown">.
<!-- expand this menu by default for mobile users -->
<li class="nav-item dropdown show">
Edit: Bootstrap 3 was open Bootstrap 4 is show
I got confuse on this app.css of built css of react js. why my navigation dropdown overlap on the right side. for the reference please see my uploaded image. currently I used react js and laravel for development. I don't find any solution for this. is there any one experience this same with me?
Html Code:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<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>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Thank you.
we need to change css
#navbarSupportedContent {
.navbar-nav {
li.nav-item:last-child {
.dropdown-menu {
right: 0;
left: auto;
}
}
}
}
Add dropdown-menu-right class in your dropdown-menu class. It will solve your problem.
<div class="dropdown-menu dropdown-menu-right">
I'm newer to Bootstrap and have a question about my Navbar.
Here is my test site. TEST-DOMAIN
I'm currently using Bootstrap 4.3.1 with JQuery 3.4.1.
Menu looks and functions great on Desktop. Dropdown appears as expected. I added columns to the dropdown to make a Mega Menu of sorts.
When the site transitions over to mobile, the dropdown is appearing to the RIGHT of the parent menu item. Is there a way to make it appear BELOW the parent item and push the rest of the menu down below it?
I tried setting the dropdown to Display: absolute as found in other posts about this. But, while it shifts the dropdown to the left like I want, it floats it overtop of the rest of the menu. I would like it to align left, while pushing the rest of the menu below it.
Thanks for any help!
* EDIT - Adding code *
<!--Navbar-->
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark nav-transparent sticky-top">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" 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>
<a class="navbar-brand" href="#" style="margin-top: -5px;"><strong>Test Website</strong></a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-center">
<li class="nav-item active">
<a class="nav-link" href="home.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
<div class="container">
<div class="row">
<div class="col-md-4">
<a class="dropdown-item" href="another-page.html">ANOTHER PAGE</a>
<a class="dropdown-item" href="pools.html">POOLS</a>
<a class="dropdown-item" href="test-10.html">TEST 10</a>
<a class="dropdown-item" href="test-5.html">TEST 5</a>
</div>
<div class="col-md-4">
<a class="dropdown-item" href="test-6.html">TEST 6</a>
<a class="dropdown-item" href="test-7.html">TEST 7</a>
<a class="dropdown-item" href="test-8.html">TEST 8</a>
<a class="dropdown-item" href="test-9.html">TEST 9</a>
</div>
<div class="col-md-4">
<a class="dropdown-item" href="yet-another-page.html">YET ANOTHER PAGE</a>
<a class="dropdown-item" href="awesome-page.html">AWESOME PAGE</a>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="kitchen-vision.html">KITCHEN VISION</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
I've removed all my custom CSS for the NavBar to make sure I wasn't doing something incorrect with my edits.
#media screen and (max-width: 768px) {
.mx-auto.d-flex {
margin: 0!important;
justify-content: space-between;
display: flex;
width: 100vw;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<div class="mx-auto d-flex">
<a class="navbar-brand" href="#">Test Website</a>
<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>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="container">
<div class="row">
<div class="col-md-4">
<a class="dropdown-item" href="another-page.html">ANOTHER PAGE</a>
<a class="dropdown-item" href="pools.html">POOLS</a>
<a class="dropdown-item" href="test-10.html">TEST 10</a>
<a class="dropdown-item" href="test-5.html">TEST 5</a>
</div>
<div class="col-md-4">
<a class="dropdown-item" href="test-6.html">TEST 6</a>
<a class="dropdown-item" href="test-7.html">TEST 7</a>
<a class="dropdown-item" href="test-8.html">TEST 8</a>
<a class="dropdown-item" href="test-9.html">TEST 9</a>
</div>
<div class="col-md-4">
<a class="dropdown-item" href="yet-another-page.html">YET ANOTHER PAGE</a>
<a class="dropdown-item" href="awesome-page.html">AWESOME PAGE</a>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="about.html">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="gallery.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="kitchen-vision.html">KITCHEN VISION</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
I intend to slightly change the navbar-toggler-icon more to the left and their respective menus as well. I have already tried to change the position in the css but this only changes the icon shown in the image and the menus are exactly the same. Could they help me? Thank you.
https://imgur.com/MZBGbCC
Code of the menu:
<span></span>
<div class="menu">
<nav class="navbar container-fluid navbar-expand-lg navbar transparent">
<button class="navbar-toggler navbar-toggler-right" id="menu_colapso" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="conteudo/menu.png" id="imagem_icon"></span>
</button>
<a class="navbar-brand">
<img src="conteudo/asus.png" class="collapse navbar-collapse" id="imagem_logo">
</a>
<div class="collapse navbar-collapse pr-5 mt-5" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto"> <!--mr-auto para voltar ao lado esquerdo-->
<li class="nav-item">
<a class="nav-link" id="linhaactiva" href="inicio">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="destaques">Destaques</a>
</li>
<li class="nav-item">
<a class="nav-link" href="museu">Museu</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Urgeiriça</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="historia">Cronologia</a>
<a class="dropdown-item" href="bairro">Bairro Mineiro</a>
<a class="dropdown-item" href="minas">As Minas</a>
<a class="dropdown-item" href="processamento">Processamento</a>
<a class="dropdown-item" href="ambiental">Impactos Ambientais</a>
<a class="dropdown-item" href="saude_publica">Saúde Pública</a>
<a class="dropdown-item" href="recuperacao">Recuperação Ambiental</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mineiros</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="laborais">Condições Laborais</a>
<a class="dropdown-item" href="impacto_saude">Impacto na Saúde</a>
<a class="dropdown-item" href="mural">Mural</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Associação</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="fundacao">Fundação</a>
<a class="dropdown-item" href="objectivos">Objectivos</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="informacoes">Informações </a>
</li>
<li class="nav-item">
<a class="nav-link"> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PT</a>
</li>
<li class="nav-item2">
<a class="nav-link" href="#">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EN</a>
</li>
</ul>
</div>
</nav>
</div>
padding-left:0 is what you're looking for...
You can do it on the toggler... which moves it left a little (class: pullToLeft)
You can do it on the nav... which moves it left little more (class: pullNavLeft)
I replaced the image you had so that I and other people on stack overflow can see the effects in action; working snippet below:
.pullToLeft {
padding-left: 0 !important;
}
.pullNavLeft {
padding: .5rem .3rem !important;
}
<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>
<div class="menu">
<nav class="navbar container-fluid navbar-expand-lg navbar transparent pullNavLeft">
<button class="navbar-toggler navbar-toggler-right pullToLeft" id="menu_colapso" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><img src="https://www.akberiqbal.com/favicon.ico" class='img-fluid ' id="imagem_icon"></span>
</button>
<a class="navbar-brand">
<img src="conteudo/asus.png" class="collapse navbar-collapse" id="imagem_logo">
</a>
<div class="collapse navbar-collapse pr-5 mt-5" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<!--mr-auto para voltar ao lado esquerdo-->
<li class="nav-item">
<a class="nav-link" id="linhaactiva" href="inicio">Início</a>
</li>
<li class="nav-item">
<a class="nav-link" href="destaques">Destaques</a>
</li>
<li class="nav-item">
<a class="nav-link" href="museu">Museu</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Urgeiriça</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="historia">Cronologia</a>
<a class="dropdown-item" href="bairro">Bairro Mineiro</a>
<a class="dropdown-item" href="minas">As Minas</a>
<a class="dropdown-item" href="processamento">Processamento</a>
<a class="dropdown-item" href="ambiental">Impactos Ambientais</a>
<a class="dropdown-item" href="saude_publica">Saúde Pública</a>
<a class="dropdown-item" href="recuperacao">Recuperação Ambiental</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Mineiros</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="laborais">Condições Laborais</a>
<a class="dropdown-item" href="impacto_saude">Impacto na Saúde</a>
<a class="dropdown-item" href="mural">Mural</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Associação</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="fundacao">Fundação</a>
<a class="dropdown-item" href="objectivos">Objectivos</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="informacoes">Informações </a>
</li>
<li class="nav-item">
<a class="nav-link"> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PT</a>
</li>
<li class="nav-item2">
<a class="nav-link" href="#">|</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EN</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).</p>
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
<p>Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.</p>
</div>
<div class="container">
<nav class="navbar navbar-toggleable-lg fixed-top navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse ">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
I want to pull-right home, features, pricing, and dropdown link elements.
I was trying to add to ul class="pull-right" but its not working.
I also tried to add nabar-right class to ul section also nothing.
From the bootstrap documentation:
Align nav links, forms, buttons, or text, using the .navbar-left or
.navbar-right utility classes. Both classes will add a CSS float in
the specified direction. For example, to align nav links, put them in
a separate <ul> with the respective utility class applied.
So use the .navbar-right class on your <ul>
Example: https://jsfiddle.net/1s7j8srp/