This question already has answers here:
Bootstrap dropdown sub menu missing
(11 answers)
Closed 1 year ago.
I'm developing a website that needs a dropdown menu within a dropdown menu but apparently in bootstrap 5.0 they removed that functionality? I've heard there are still ways to get sub-menus but all of the methods that I have tried didn't work, please help!
This is the clean way to implement this!
(function($bs) {
const CLASS_NAME = 'has-child-dropdown-show';
$bs.Dropdown.prototype.toggle = function(_orginal) {
return function() {
document.querySelectorAll('.' + CLASS_NAME).forEach(function(e) {
e.classList.remove(CLASS_NAME);
});
let dd = this._element.closest('.dropdown').parentNode.closest('.dropdown');
for (; dd && dd !== document; dd = dd.parentNode.closest('.dropdown')) {
dd.classList.add(CLASS_NAME);
}
return _orginal.call(this);
}
}($bs.Dropdown.prototype.toggle);
document.querySelectorAll('.dropdown').forEach(function(dd) {
dd.addEventListener('hide.bs.dropdown', function(e) {
if (this.classList.contains(CLASS_NAME)) {
this.classList.remove(CLASS_NAME);
e.preventDefault();
}
if(e.clickEvent && e.clickEvent.composedPath().some(el=>el.classList && el.classList.contains('dropdown-toggle'))){
e.preventDefault();
}
e.stopPropagation(); // do not need pop in multi level mode
});
});
// for hover
function getDropdown(element) {
return $bs.Dropdown.getInstance(element) || new $bs.Dropdown(element);
}
document.querySelectorAll('.dropdown-hover, .dropdown-hover-all .dropdown').forEach(function(dd) {
dd.addEventListener('mouseenter', function(e) {
let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');
if (!toggle.classList.contains('show')) {
getDropdown(toggle).toggle();
}
});
dd.addEventListener('mouseleave', function(e) {
let toggle = e.target.querySelector(':scope>[data-bs-toggle="dropdown"]');
if (toggle.classList.contains('show')) {
getDropdown(toggle).toggle();
}
});
});
})(bootstrap);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<!-- Begin SEO tag -->
<title>Infinite Multiple Level Dropdown Menu base on Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<style>.dropdown-hover-all .dropdown-menu, .dropdown-hover > .dropdown-menu.dropend { margin-left:-1px !important }</style>
</head>
<body class="">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Demo <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown dropdown-hover">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Hover</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Single App</a>
<a class="dropdown-item" href="#">Multiple Works</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Disctribution</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown02" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Documents</a>
<div class="dropdown-menu" aria-labelledby="dropdown02">
<a class="dropdown-item" href="#">Introduction</a>
<div class="dropdown dropend">
<a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Layouts</a>
<div class="dropdown-menu" aria-labelledby="dropdown-layouts">
<a class="dropdown-item" href="#">Basic</a>
<a class="dropdown-item" href="#">Compact Aside</a>
<div class="dropdown-divider"></div>
<div class="dropdown dropend">
<a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Custom</a>
<div class="dropdown-menu" aria-labelledby="dropdown-layouts">
<a class="dropdown-item" href="#">Fullscreen</a>
<a class="dropdown-item" href="#">Empty</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Magic</a>
</div>
</div>
</div>
</div>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="https://github.com/dallaslu/bootstrap-5-multi-level-dropdown">View on Github</a>
</li>
</ul>
</div>
</nav>
<div class="container" style="padding-top: 3.5rem">
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<div class="dropdown dropend">
<a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Layouts</a>
<div class="dropdown-menu" aria-labelledby="dropdown-layouts">
<a class="dropdown-item" href="#">Basic</a>
<a class="dropdown-item" href="#">Compact Aside</a>
<div class="dropdown-divider"></div>
<div class="dropdown dropend">
<a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Custom</a>
<div class="dropdown-menu" aria-labelledby="dropdown-layouts">
<a class="dropdown-item" href="#">Fullscreen</a>
<a class="dropdown-item" href="#">Empty</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Magic</a>
</div>
</div>
</div>
</div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<div class="d-flex dropdown-hover-all">
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton222" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Hover
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton222">
<a class="dropdown-item" href="#">Action</a>
<div class="dropdown dropend">
<a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Layouts</a>
<div class="dropdown-menu" aria-labelledby="dropdown-layouts">
<a class="dropdown-item" href="#">Basic</a>
<a class="dropdown-item" href="#">Compact Aside</a>
<div class="dropdown-divider"></div>
<div class="dropdown dropend">
<a class="dropdown-item dropdown-toggle" href="#" id="dropdown-layouts" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Custom</a>
<div class="dropdown-menu" aria-labelledby="dropdown-layouts">
<a class="dropdown-item" href="#">Fullscreen</a>
<a class="dropdown-item" href="#">Empty</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Magic</a>
</div>
</div>
</div>
</div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
</html>
Also, keep in mind that hover functionality will not work on mobile devices. Now you can choose best scenario for yourself!
Related
I'm recreating the mac OS navbar and would like to resize the navbar height, and the text size (to around 12px). It's the very first time I'm using bootstrap so any help would be amazing, please. Also, let me know about where I could find information about how to use bootstrap other than their website.
<body>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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">
<i class="fa-solid fa-power-off"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">About ziko OS</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
<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">
File</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Close Window</a>
<a class="dropdown-item" href="#">Get info</a>
<a class="dropdown-item" href="#">Move to trash</a>
<a class="dropdown-item" href="#">Find</a>
</div>
</li>
<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">
Edit</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Undo</a>
<a class="dropdown-item" href="#">Redo</a>
<a class="dropdown-item" href="#">Cut</a>
<a class="dropdown-item" href="#">Copy</a>
<a class="dropdown-item" href="#">Paste</a>
<a class="dropdown-item" href="#">Select All</a>
<a class="dropdown-item" href="#">Emojis & Symbols</a>
</div>
</li>
<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">
Help</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">ziko OS help</a>
<a class="dropdown-item" href="#">Search</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
Basically you need to add css height to navbar class.
<style>
.navbar{ height: 48px;}
.navbar a{font-size:12px;}
</style>
Please check this codepane Demo
I have been trying to create two bootstrap navbars. The first has the website domain name in the center, with a dropdown menu to go to other sections. Then each section has it's own subbar with it's own links.
It currently looks like this.
Which is great and just how I want it. However when I click the dropdown on the brand name, it gets pushed to the left and overlapped with the other navbar.
I also want to bring my theme selector and user profile dropdown to the top nav bar, aligned to the right of the screen. But everytime I try it just ruins the top nav bar and the user profile dropdown gets same overlap issue.
<nav id="topnav" class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand dropdown-toggle ml-auto mr-auto" href="#navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">WebsiteName</a>
<div class="dropdown-menu" id="navbarDropdown" 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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navcollapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<nav id ="bottomnav" class="navbar navbar-expand-lg navbar-dark bg-primary py-0 sticky-top">
<div class="container">
<div id="navcollapse" class="collapse navbar-collapse my-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Section Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</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">
Section Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#themeModal"><i class="fas fa-moon fa-white"></i></a>
<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">
Username
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/profile/">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/section/">section</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout/">Logout</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="/search">
<input class="form-control mr-sm-2" type="text" name="q" placeholder="Search">
</form>
</div>
</div>
added
div.dropdown-menu{
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
to bring it in the center. By default bootstrap has left:0 so t shows at the left side of a.
z-index: 9999 because navbar with sticky-top class has z-index: 1020;
https://codepen.io/Xenio/pen/LqmamQ888
div.dropdown-menu{
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<nav id="topnav" class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand dropdown-toggle ml-auto mr-auto" href="#navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">WebsiteName</a>
<div class="dropdown-menu" id="navbarDropdown" 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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navcollapse" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<nav id ="bottomnav" class="navbar navbar-expand-lg navbar-dark bg-primary py-0 sticky-top">
<div class="container">
<div id="navcollapse" class="collapse navbar-collapse my-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Section Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Section/">Section</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">
Section Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
<a class="dropdown-item" href="/Section/">Section</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="modal" data-target="#themeModal"><i class="fas fa-moon fa-white"></i></a>
<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">
Username
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/profile/">Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/section/">section</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/logout/">Logout</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0" action="/search">
<input class="form-control mr-sm-2" type="text" name="q" placeholder="Search">
</form>
</div>
</div>
I'm working on my first big project. I've built almost everything but the menu has problems. Clicking on the link in the menu opens the subpage but does not go to the label.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
<span class="caret"></span>
Nurty</a>
<div class="dropdown-menu aria-labelledby=dropdown_target">
<a class="dropdown-item" href="/nurty.html">Techouse</a>
<a class="dropdown-item" href="/nurty.html#minit">Minimal</a>
<a class="dropdown-item" href="/nurty.html#classt">Classic</a>
<a class="dropdown-item" href="/nurty.html#detrt">Detroit</a>
<a class="dropdown-item disabled" href="/nurty.html#hardgroove">Hardgroove</a>
<a class="dropdown-item" href="/nurty.html#hart">Hard</a>
</div>
In subpage I want to go for example to this label:
<section id="minit">
But still not working.
How can I fix it or maybe is other way to do it?
this is the working example of your need, i also added smooth scoll by adding css smooth-behavior: smooth, i added 1500px height for clear view of your problem
Index.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
<span class="caret"></span>
Nurty
</a>
<div class="dropdown-menu aria-labelledby=dropdown_target">
<a class="dropdown-item" href="example.html">Techouse</a>
<a class="dropdown-item" href="example.html#minit">Minimal</a>
<a class="dropdown-item" href="example.html#classt">Classic</a>
<a class="dropdown-item" href="example.html#detrt">Detroit</a>
<a class="dropdown-item disabled" href="example.html#hardgroove">Hardgroove</a>
<a class="dropdown-item" href="example.html#hart">Hard</a>
</div>
</li>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
example.html
<style>
html {
scroll-behavior: smooth;
}
</style>
<div style="height: 1500px;"></div> <!-- FOR SCROLL VIEW -->
<section id="minit">scroll or die</section>
I have a Django-powered Bootstrap website. I'm using the theme Modern Business by Start Bootstrap.
This is how it looks on the live sample:
This is how it looks on my website (note the resources text below the logo):
Here's my code for the navbar.
{% load static from staticfiles %}
<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarExample" aria-controls="navbarExample" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container" style="height: 48px;">
<a class="navbar-brand" href="index.html">
<img src="{% static 'web/img/header-logo-2.png' %}" height="70px" style="height: 50px;
position: absolute;
top: 0;"></a>
<div class="collapse navbar-collapse" id="navbarExample">
<ul class="navbar-nav ml-auto">
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
About
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item" href="">Board of Directors</a>
<a class="dropdown-item" href="about-staff">Executive Administration</a>
</div>
</li>-->
<!--<li class="nav-item">
<a class="nav-link" href="schools">Schools</a>
</li>-->
<!--<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Resources
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
<a class="dropdown-item"
href="https://www.dropbox.com/s/ngzaxhg4gqlibpx/2016-2017%20OCDL%20Charter.pdf?dl=0"
target="_blank">League Charter</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/0nh1a93og93vqt0/OCDL%20Affidavit%202015-2016.pdf?dl=0"
target="_blank">Student Agreement</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/en1t2ek23rxzxlj/OCDL%20Judges%20Affidavit.pdf?dl=0"
target="_blank">Judge Agreement</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/lwxsnbpmc29vylq/OCDL%20Judge%20Guide-11-4-15.pdf?dl=0"
target="_blank">Judge Guide</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/tkcvaggipfn91fi/Flow%20Chart%2C%20Orange%20County%20Debate%20League.docx?dl=0"
target="_blank">Blank Flowchart</a>
<a class="dropdown-item"
href="https://www.dropbox.com/s/vphswry1d4rgm0d/Speaker%20Performance%20Rubric%2C%20Orange%20County%20Debate%20League.pdf?dl=0"
target="_blank">OCDL Rubric</a>
</div>
</li>
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Blog
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
<a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
<a class="dropdown-item" href="blog-post.html">Blog Post</a>
</div>
</li>-->
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Other Pages
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="full-width.html">Full Width Page</a>
<a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
<a class="dropdown-item" href="faq.html">FAQ</a>
<a class="dropdown-item" href="404.html">404</a>
<a class="dropdown-item" href="pricing.html">Pricing Table</a>
</div>
</li>-->
</ul>
</div>
</div>
</nav>
You can simply add media query for particular screen width. In your case bootstrap navbar will change at a screen width of 768px, so just add this to your css file:
#media screen and (max-width: 787px) {
.navbar-inverse {
opacity: 0.9;
}
}
I have a navbar with a split dropdown. The particular portion of the HTML I'm interested in is this:
<li class="nav-item">
<div class="btn-group">
Blog
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | Blog Main</div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>
</li>
And the entire navbar looks like this:
<nav class="navbar navbar-toggleable-sm fixed-top">
<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">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</button>
<a class="navbar-brand" href="#home">Brandon D. Hastings<small class="hidden-md-down"> BBA(Dist.), JD</small></a>
<div class="navbar-collapse collapse" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#law">Law</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#technology">Technology</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#media">Media</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink_more" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">More</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink_more">
<a class="dropdown-item" href="#miscinfo">More About Me</a>
<div class="dropdown-divider"></div>
<div class="dropdown-header"><em>New Tab / Window</em></div>
<a class="dropdown-item" href="http://(bitly not allowed)/BHastings_CV" target="_blank">Curriculum Vitae</a>
<a class="dropdown-item" href="http://bhastings.com/blog/category/resources-for-lawyers/" target="_blank">Resources for Lawyers</a>
</div>
</li>
<li class="nav-item">
<div class="btn-group">
Blog
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | Blog Main</div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>
</li>
<li class="nav-item btn btn-danger btn-sm">
<a class="nav-link text-white url-firm" href="http://www.quaylawcentre.com/Lawyer-Profiles/Brandon-Hastings-B-b-a-dist-j-d.shtml" target="_blank">Get in Touch<span class="sr-only"></span></a>
</li>
</ul>
</div>
</nav>
The result is something like this in small screens:
Having a split link in a navbar is a bit hacky to begin with, but notwithstanding that, I'm wondering if anyone knows a way to get the dropdown to pop back "in line" so that it looks more like the "More" dropdown:
?
Thanks in advance! :)
Just add container class in the btn-group div.
The misalignment is because of the btn-group class is defined as flex item. Try adding container class, it may solve the issue.
<div class="container p-0 btn-group">
Blog
<a class="nav-link dropdown-toggle dropdown-toggle-split" id="dropdownMenuLink_blog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown for Blog Links</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink_blog">
<div class="dropdown-header">Categories | Blog Main</div>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=20" target="_blank"><small><em>Articles for Everyone</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=8" target="_blank"><small><em>Access to Justice Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=5" target="_blank"><small><em>Law Commentary</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=6" target="_blank"><small><em>Legal Futurism</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=4" target="_blank"><small><em>Resources for Lawyers</em></small></a>
<a class="dropdown-item" href="http://bhastings.com/blog?cat=36" target="_blank"><small><em>Technology</em></small></a>
</div>
</div>
The HTML below works when you expand a collapsed navbar!
Bootstrap: 5.0.0-beta2
<li class="nav-item col-6 col-md-auto">
<!-- NOTE: d-table on the group and nav-link d-inline for the inner <a> tags is a must for split button to work properly when collapsed/expanded -->
<div class="btn-group d-table nav-link p-2">
<a class="nav-link d-inline">Dropdown link</a>
<a class="nav-link d-inline" role="button" data-bs-toggle="dropdown">
<i class="far fa-caret-square-down"></i>
</a>
<ul class="dropdown-menu ">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</li>
I guess this isn't a very clean answer but I added some margin and it does the job. But can't wait to see a better solution.
#media (max-width: 992px) {
.dropdown-menu {
margin:35px 0 0 -150px;
}
}