How to make this treemenu active when click (selected).
Do i need to add additional javascript code?
I'm using latest bootstrap 4 and js.3.3.1
<ul class="nav submenu">
<li class="nav-item">
<a class="nav-link collapsed" href="#type" data-toggle="collapse" data-target="#type">Type</a>
<div class="collapse" id="type" aria-expanded="false">
<ul class="flex-column nav">
<li class="nav-item"><a class="nav-link py-0" href="">Residential</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Commercial</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Industrial</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Religious</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Institution</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link collapsed" href="#service" data-toggle="collapse" data-target="#service">Service</a>
<div class="collapse" id="service" aria-expanded="false">
<ul class="flex-column nav">
<li class="nav-item"><a class="nav-link py-0" href="">Residential</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Commercial</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Industrial</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link collapsed" href="#award" data-toggle="collapse" data-target="#award">Award</a>
<div class="collapse" id="award" aria-expanded="false">
<ul class="flex-column nav">
<li class="nav-item"><a class="nav-link py-0" href="">Religious</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Institution</a></li>
</ul>
</div>
</li>
</ul>
I think Yes you should add additional JavaScript code.
function selectedItem(id) {
$("ul>li>a").removeClass("active");
$("#" + id).addClass("active");
}
.active {
background-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class="nav submenu">
<li class="nav-item">
<a id="item1" onClick="selectedItem('item1')" class="nav-link collapsed" href="#type" data-toggle="collapse" data-target="#type">Type</a>
<div class="collapse" id="type" aria-expanded="false">
<ul class="flex-column nav">
<li class="nav-item"><a class="nav-link py-0" href="">Residential</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Commercial</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Industrial</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Religious</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Institution</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a id="item2" onClick="selectedItem('item2')" class="nav-link collapsed" href="#service" data-toggle="collapse" data-target="#service">Service</a>
<div class="collapse" id="service" aria-expanded="false">
<ul class="flex-column nav">
<li class="nav-item"><a class="nav-link py-0" href="">Residential</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Commercial</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Industrial</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a id="item3" onClick="selectedItem('item3')" class="nav-link collapsed" href="#award" data-toggle="collapse" data-target="#award">Award</a>
<div class="collapse" id="award" aria-expanded="false">
<ul class="flex-column nav">
<li class="nav-item"><a class="nav-link py-0" href="">Religious</a></li>
<li class="nav-item"><a class="nav-link py-0" href="">Institution</a></li>
</ul>
</div>
</li>
</ul>
Related
How to implement bootstrap 4 navbar dropdown. I am using class .navvbar-bottom to make it horozontal.**
.navbar-bottom class to add scrollbar to navbar**
.navbar-bottom {
overflow-x: auto;
white-space: nowrap;
}
HTML
<nav class="navbar navbar-expand navbar-light navbar-bottom">
<ul class="navbar-nav mr-auto pl-2">
<li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
<li class="nav-item">
<div class="dropdown">
<a class="nav-link" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
Dropdown1
Dropdown2
Dropdown3
Dropdown4
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
.........................................................................
.........................................................................
.........................................................................
.........................................................................
<li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
</ul>
</nav>
<nav class="navbar navbar-expand navbar-light">
<ul class="navbar-nav mr-auto pl-2">
<li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
<li class="nav-item">
<div class="dropdown">
<a class="nav-link" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
Dropdown1
Dropdown2
Dropdown3
Dropdown4
</div>
</div>
</li>
<li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
.........................................................................
.........................................................................
.........................................................................
.........................................................................
<li class="nav-item"><a class="nav-link px-6" href="#">Menu Item</a></li>
</ul>
</nav>
This is how you can add a dropdown to your navbar menu item. Don't forget to add Bootstrap CDN's for CSS and JS in your HTML file. Also, you don't need navbar-bottom class to make the navbar horizontal.
Any suggestions how to get the alignement of the navbar correct?
The logo is not in the middele and the menu is pushed to the right.
Check also: https://torza.nl/rsw2
<div class="row">
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="mailto:info#rotterdamsteelworks.nl" style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
</li>
</ul>
<a class="navbar-brand" href="index.php"><img class="img-fluid" src="img/logo.png" width="500" alt="Rotterdam Steel Works"></a>
<ul class="collapse navbar-collapse navbar-nav mr-auto">
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="45" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="45" alt="CE NEN EN1090"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="45" alt="Lloyds overstempelbevoegd"></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="row">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>
</div>
After the changes suggested by Aleksandr Belugin it looks like (still not centered)
Your HTML STRUCTRURE should be as following
<header class="header-container">
<div class="row justify-content-between align-items-center">
<div class="col">
<ul class="collapse navbar-collapse navbar-nav ml-auto">
<li class="nav-item"> <a class="nav-link" href="mailto:info#rotterdamsteelworks.nl"
style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i>
<span>Send email</span>
</small></a> </li>
<li class="nav-item"> <a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i
class="fas fa-phone-volume"></i>
<span>+31 (0) 184-632456</span>
</small></a> </li>
</ul>
</div>
<div class="col-auto">
<a class="navbar-brand" href="index.php"><img class="img-fluid d-block" src="img/logo.png"
alt="Rotterdam Steel Works"></a>
</div>
<div class="col">
<ul class="collapse navbar-collapse navbar-nav mr-auto">
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid"
src="img/logo_metaalunie.png" width="45" alt="Metal Union"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid"
src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png"
width="45" alt="CE NEN EN1090"></a> </li>
<li class="nav-item"> <a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png"
width="45" alt="Lloyds stamp authorized"></a></li>
</ul>
</div>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
</div>
<nav class="row menu-container justify-content-center">
<div class="col-auto">
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>
<span>Home</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>
<span>About us</span>
</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>
<span>Services</span>
</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>
<span>Markets</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>
<span>Certification</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>
<span>Media</span>
</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>
<span>Contact</span>
</strong></a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Your CSS style should be
.header-container .navbar-brand {
width: auto;
height: 100%;
}
Suggestions -> Don't use font tag, instead use css to style font. its way long back old method to style html element.
Always use HTML5 Semantic tags. :)
Remove flex-grow:1 from .navbar-collapse or add flex-grow-0 class.
and justify content property- justify-content:space-between or add justify-content-between class.
.navbar-collapse {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-positive: 1;
flex-grow: 1; /*Remove this property */
-ms-flex-align: center;
align-items: center;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between; /* add this property */
margin-right: -15px;
margin-left: -15px;
}
To align the menu towards right add float-right class.
<div class="row justify-content-between align-items-center float-right
">
<div class="navbar-collapse collapse show" id="navbarResponsive" style="">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>Diensten</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>
As you resolved the first one for centering the menu just add class
justify-content-center on your second header parent
<div class="collapse justify-content-center navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color:#E4000B;"><strong>Diensten</strong></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="service_snijden.php" style="color:#2A5AA4;">Snijden</a>
<a class="dropdown-item" href="service_stralen.php" style="color:#2A5AA4;">Stralen</a>
<a class="dropdown-item" href="service_lassen.php" style="color:#2A5AA4;">Lassen</a>
<a class="dropdown-item" href="service_afschuinen.php" style="color:#2A5AA4;">Afschuinen</a>
<a class="dropdown-item" href="service_boren.php" style="color:#2A5AA4;">Boren</a>
<a class="dropdown-item" href="service_zetten.php" style="color:#2A5AA4;">Zetten</a>
<a class="dropdown-item" href="service_schuren.php" style="color:#2A5AA4;">Schuren</a>
<a class="dropdown-item" href="service_materiaal.php" style="color:#2A5AA4;">Materiaal</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
Using bootstrap add to left <ul> after brand, class justify-content-end and if you want your menu also to be centered add class justify-content-center to div, what surrounds <ul class="navbar-nav">
Also your could add some bottom space to brand to separate it from menu by adding class, for example , mb-3 to it
Should be something like this
<div class="row">
<ul class="collapse navbar-collapse navbar-nav">
<li class="nav-item">
<a class="nav-link" href="mailto:info#rotterdamsteelworks.nl" style="color:#2A5AA4;"><small><i class="fas fa-envelope"></i> Stuur e-mail</small></a>
</li>
<li class="nav-item">
<a class="nav-link" href="tel:00310184632456" style="color:#2A5AA4;"><small><i class="fas fa-phone-volume"></i> +31(0)184-632456</small></a>
</li>
</ul>
<a class="navbar-brand mb-3" href="index.php"><img class="img-fluid" src="img/logo.png" width="500" alt="Rotterdam Steel Works"></a>
<ul class="collapse navbar-collapse navbar-nav justify-content-end">
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_metaalunie.png" width="45" alt="Metaalunie"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_iso_9001.png" width="45" alt="ISO 9001"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_ce.png" width="45" alt="CE NEN EN1090"></a>
</li>
<li class="nav-item">
<a class="" href="certificering.php"><img class="img-fluid" src="img/logo_lr.png" width="45" alt="Lloyds overstempelbevoegd"></a>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="row">
<div class="collapse navbar-collapse justify-content-center" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php" style="color:#E4000B;"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.php" style="color:#E4000B;"><strong>Over ons</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="markten.php" style="color:#E4000B;"><strong>Markten</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="certificering.php" style="color:#E4000B;"><strong>Certificering</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="color:#E4000B;"><strong>Media</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php" style="color:#E4000B;"><strong>Contact</strong></a>
</li>
</ul>
</div>
</div>
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 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>
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.