I can not find a way to move my navigation's last item (from the left) to the right side of the bar with Bootstrap styling
There are bunch of solutions, how to move all items to the right, but I need only my dropdown menu on the right side of the bar.
How can I do that, using only Bootstrap CSS classes?
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item dropdown navbar-right">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My account
</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>
You have to separate the navs, all left navs in one and right navs in another which will have class navbar-right.
Try this HTML structure:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="navbar">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<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</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My account
</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>
For results, Run code snippet in Expanded view.
use this only if you are using bootstrap 4
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav d-flex">
<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</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item dropdown ml-auto">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
My account
</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>
Related
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 have this bootstrap html code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Our Service
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">service2</a>
<a class="dropdown-item" href="#">service 2</a>
<a class="dropdown-item" href="#">service 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Call</a>
</li>
<!-- <li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
<a class="dropdown-item" href="#">Link 6</a>
</div>
</li> -->
</ul>
<div class="social-part">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
</nav>
I want to add stylesheet in the below line to make the text "Home" look white. Kindly help.
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
Kindly help me to apply stylesheet in the above line to make the test look white. I need to apply white color on this.
Add on your Home text-light. I change the background to dark so the home to be visible
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm bg-dark navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link text-light" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Our Service
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">service2</a>
<a class="dropdown-item" href="#">service 2</a>
<a class="dropdown-item" href="#">service 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Call</a>
</li>
<!-- <li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<a class="dropdown-item" href="#">Link 5</a>
<a class="dropdown-item" href="#">Link 6</a>
</div>
</li> -->
</ul>
<div class="social-part">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</div>
</div>
</nav>
here is code what I want to achieve by WordPress custom dropdown but I can't, can anyone tell me how can I do that, and other menu items should be normal and simple
[![<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="products.html">Products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#">
<div class="img">
<img src="images/dropdown-img.jpg" alt="">
</div>
<span class="title">Cable &<br> Cable Accessories</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link dropdown" href="service.html">Service</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="nav-item">
<a class="dropdown-item" href="#">
DEMO
</a>
</li>
<li class="nav-item">
<a class="dropdown-item" href="#">
DEMO
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="brands.html">Contact</a>
</li>
</ul>][1]][1]
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>
Ok so I have to admit this is something I have always struggled with getting to work correctly even in BS3. But I want to have navbar links outside of the collapsed container that stay persistent.
This is what I have right now:
<nav class="navbar fixed-top navbar-expand-lg navbar-template">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" 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="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu dropdown-menu-right">
<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>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-facebook"></span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-twitter"></span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-youtube"></span></a></li>
<li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-linkedin"></span></a></li>
</ul>
</nav>
This works until the first nav is in a collapsed state. When the collapse is active it looks like this:
Has anyone found a clean solution for this?
The simplest way is using the flexbox utility classes, so no extra CSS is needed. Keep the items you always want to show out of the navbar-collapse div.
https://www.codeply.com/go/TWZGiy3VGw
<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">
<a class="navbar-brand" href="#">Navbar</a>
<div class="d-flex flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row">
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-facebook"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-twitter"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-youtube"></span></a></li>
<li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-linkedin"></span></a></li>
</ul>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" 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="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu dropdown-menu-right">
<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>
Notice the use the responsive order-* classes to ensure the collapse menu items remain last (order-3) when in the collapsed/mobile breakpoint.