Multi-level bootstrap Navbar: Can't hover on children elements - javascript

So I'm trying to make a multi-level navbar in my project using Bootstrap Navbar with additional CSS and Jquery.
Here are the codes:
CodePen
$(function() {
// ------------------------------------------------------- //
// Multi Level dropdowns
// ------------------------------------------------------ //
$("ul.dropdown-menu [data-toggle='dropdown']").on("mouseover", function(event) {
event.preventDefault();
event.stopPropagation();
$(this).siblings().toggleClass("show");
});
$("ul.dropdown-menu [data-toggle='dropdown']").on("mouseleave", function(event) {
$(this).siblings().removeClass("show");
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>a:after {
content: "\f0da";
float: right;
border: none;
font-family: 'FontAwesome';
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: 0px;
}
.dropdown-item {
padding: .25rem 0.5rem!important;
}
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/5336ef90a8.js" crossorigin="anonymous"></script>
<title>Test</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="./"> <img class="favicon" src="{{asset('img/Favicon.ico')}}" alt=""> </a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#headerNav"
aria-controls="headerNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="headerNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Level one dropdown -->
<li class="nav-item dropdown">
<a id="dropdownMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
class="nav-link dropdown-toggle">CATEGORIES</a>
<ul aria-labelledby="dropdownMenu1" class="dropdown-menu border-0 shadow">
<li class="dropdown-submenu">
<a id="dropdownMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="dropdown-item dropdown-toggle">CEILING FANS</a>
<ul aria-labelledby="dropdownMenu2" class="dropdown-menu border-0 shadow">
<li>
<a tabindex="-1" href="#" class="dropdown-item">CF1</a>
</li>
<li>CF2</li>
<li>CF3</li>
</ul>
</li>
<li class="dropdown-submenu">
<a id="dropdownMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="dropdown-item dropdown-toggle">TABLE FANS</a>
<ul aria-labelledby="dropdownMenu2" class="dropdown-menu border-0 shadow">
<li>
<a tabindex="-1" href="#" class="dropdown-item">TF1</a>
</li>
<li>TF2</li>
<li>TF3</li>
</ul>
</li>
<li class="dropdown-submenu">
<a id="dropdownMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false" class="dropdown-item dropdown-toggle">EXHAUST FANS</a>
<ul aria-labelledby="dropdownMenu2" class="dropdown-menu border-0 shadow">
<li>
<a tabindex="-1" href="#" class="dropdown-item">EF1</a>
</li>
<li>EF2</li>
<li>EF3</li>
</ul>
</li>
</ul>
</li>
<!-- End Level one -->
</ul>
</div>
</nav>
<!-- End Navbar -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/67aa126bbd.js" crossorigin="anonymous"></script>
</body>
</html>
The problem is I can't hover on children like CF1, CF2, CF3,... and so on. When I move the mouse out of its parent element (which is Ceiling Fans), the sub-menu disappears.

Just Add This CSS
.dropdown-submenu:hover .dropdown-menu {
display: block;
}

Related

Move Items in Bootstrap 5 Navigation Bar

So, I'm trying to align the items of a Bootstrap 5 navigation bar to the side as shown in this screenshot
I expected it to move to the side but it didn't work. I didn't see any change in the site. (I was using Live Server extension) Probably just changed something but Bootstrap overrides it.
While I was making this question, in the similar questions, none of them was related or it wasn't in Bootstrap 5.
I attempted using margin, padding, text-align: right / text-align:flex-end;, and align-items:right / align-items:flex-right on navbar-nav but to no avail.
Here is some code:
navbar-nav {
padding: 20px;
margin: 20px;
}
navbar-nav {
text-align: right;
align-items: right;
}
navbar-nav {
text-align: flex-end;
align-items: flex-end;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scratch Bookmarklets</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Scratch Bookmarklets</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<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="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>
Thank you in advance.
Just change me-auto with ms-auto on navbar-nav.
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
TO
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">

Dropdown menu not opening on click

The dropdown menu inside navbar is not opening on click.
Here's HTML part:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="icon" href="brand logo.png" type="image/gif">
<title>Special Education Notes</title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#homeImage"><img src="brand logo.png" alt="logo" style="width: 70px;"></a>
<button class="navbar-toggler" type="button" id="menu-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" style="font-size: 20px;" href="#about">About Us<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Notes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" style="font-size: 20px;" href="bedspl.php">B.Ed Special Education</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" style="font-size: 20px;" href="dedspl.php">D.Ed. Special Education</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#contact-us" aria-disabled="true">Contact Us</a>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#" aria-disabled="true">Upload</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><span class="nav-link"><i class="fab fa-facebook-square"></i></span></li>
</ul>
</div>
</nav>
</body>
</html>
And here's the javascript code:
$('.navbar-collapse a').click(function() {
});
$('.navbar-collapse a').click(function() {
});
JSFiddle link: https://jsfiddle.net/n2jq7uLx/
I want my navbar to close after selecting the link but it seems to not working on the dropdown menu inside the navbar.
Thanks in advance.
The dropdown menu guard is realized as a html anchor element (a). IN the intializer code, the same handler is attached as is for the leaf anchors that implement actual navigation.
Solution:
Do not attach the handler to this element.
Coding:
The linked fiddle has several problems:
It does not include jQuery, while jQuery is used
The handlers use the .collapse method that is not defined.
The use of .hide (which was probably intended) does not work here because the .navbar-collapse element whose css is to be modified has the display property value marked with !important in its css overriding the settings produced by the click handler.
(The click handler might be set at the wrong point in time as it is not explicitly sync'ed with the dom tree creation ( I haven't checked this though and haven't researched this any more but wrapped the handler assignments with the jquery .ready method ))
The code below uses the more specific css selector that controls the display: flex!important css property assignment to the navigation bar and filters the dropdown menu guard from the elements the handler is registered with. The element to be hidden is found in a bottom-up traversal starting at the element receiving the element which might be a tad more efficient than querying it by its css class (no benchmarks though).
$(document).ready(() => {
$('.navbar-expand-sm .navbar-collapse a').not(".dropdown-toggle").click(function(eve) {
$(eve.target).closest(".navbar-expand-sm .navbar-collapse").css('visibility', 'hidden');
});
});
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="icon" href="brand logo.png" type="image/gif">
<title>Special Education Notes</title>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#homeImage"><img src="brand logo.png" alt="logo" style="width: 70px;"></a>
<button class="navbar-toggler" type="button" id="menu-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" style="font-size: 20px;" href="#about">About Us<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Notes
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" style="font-size: 20px;" href="http://www.google.de">B.Ed Special Education</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" style="font-size: 20px;" href="http://www.google.de">D.Ed. Special Education</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#contact-us" aria-disabled="true">Contact Us</a>
</li>
<li class="nav-item active">
<a class="nav-link" style="font-size: 20px;" href="#" aria-disabled="true">Upload</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><span class="nav-link"><i class="fab fa-facebook-square"></i></span></li>
</ul>
</div>
</nav>
</body>
</html>
Finally got the correct code:
$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
$(".navbar-collapse").collapse('hide');
});

Bootstrap 4 navbar nav-item active class not working

I am quite desperate, I checked every similar questions on stackoverflow and tried many solutions found on google but in vain... I'm really unable to find a working solution to my problem.
I am developping a site with Bootstrap 4 and I have a navbar. When I click on one of the nav-link I want it to have the "active" class, while others stay normal.
I might not select the right elements or use wrong jquery/javascript code.
The navbar html code (1) is in a separate header.html file that I load with JS at the beginning of the html page (2):
(1)
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ml-auto">
<div class="container">
<a class="navbar-brand" href="../index.html#"><img src="../images/DSIMB.svg" alt=""></a>
<button class="navbar-toggler" 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 class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="members.html#">Members</a>
<a class="dropdown-item" href="publications.html#">Publications</a>
<a class="dropdown-item" href="teaching.html#">Teaching</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="web_tools.html#">Web Tools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="research.html#">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="infrastructures.html#">Infrastructures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html#">Contacts</a>
</li>
</ul>
</div>
</div>
</nav>
(2)
<script>
$(function() {
$("#header").load("./header.html");
});
</script>
Here is the JS I put at the end of the html page just before the </body> tag:
<script>
$('.navbar .nav-item .navlink').click(function() {
$('.navbar .nav-item').removeClass('active');
$(this).addClass('active');
})
</script>
And here the active css class I want to set to the active nav-link:
.navbar .nav-item > .nav-link.active {
color:white;
font-weight: 700;
}
Please tell me what I am doing wrong...
UPDATE
I put here the solution I found thanks to a simple snippet (that I adapted to my code) taken from this site which #NmiDev kindly pointed to me.
I add my custom active class to the link in the navbar targeted thanks to href / location parsing:
$("#header").load("./header.html", function(){
$('a[href="' + location.pathname.split("/")[2] + '"]').addClass("active-nav");
});
Here a snippet.
Hope it's help you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.active {
color: red !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ml-auto">
<div class="container">
<a class="navbar-brand" href="../index.html#"><img src="../images/DSIMB.svg" alt=""></a>
<button class="navbar-toggler" 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 class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Members</a>
<a class="dropdown-item" href="#">Publications</a>
<a class="dropdown-item" href="#">Teaching</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Web Tools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Infrastructures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$('.nav-link').click(function() {
$('.nav-link').removeClass('active');
$(this).addClass('active');
})
</script>
</body>
</html>
It's seems that you don't need to override the css active class. White is the default behavior.

Multilevel Navbar on Bootstrap 4 (Bootswatch) on right side

So I have a multilevel Navbar in Bootswatch 4 (Bootstrap 4) on the right sid in the desktop version (which I took from an example without really understanding the CSS and Javascript behind it) and I want to pop the Submenus open to the left side as normally works with "dropdown-menu-right" which doesn't help here. How can I still make the Submenus pop open to the left? Can someone help me how the CSS / Javascript could look like that it can work that way?
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.0/cosmo/bootstrap.min.css">
<link href="bootstrap-4-navbar.css" rel="stylesheet">
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(0deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<nav class="navbar navbar-expand-lg fixed-top bg-dark navbar-dark">
<div class="container">
<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="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">AAA</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
<li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
</script>
</body>
</html>
You need to adjust the left position of the submenus...
.dropdown-submenu>.dropdown-menu {
top: 0;
left: -10rem; /* 10rem is the min-width of dropdown-menu */
position: relative;
}
Bootstrap 4 Dropdown Submenus Right
Related: Bootstrap dropdown sub menu missing

how to control the position of elements in its parents in my case?

I am trying to implement Appearance of one website http://www.2chainz.com/
I am still in the first step, doing the nav bar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--facebook icon-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
.navbarleft{
width: 40%;
}
.navbarmiddle{
font-size: 2rem;
margin: 0 auto;
width: 20%;
text-align: center;
}
.navbarright{
width: 40%;
float: right;
}
.navbar-nav{
padding-left: auto !important;
}
.fa{
float: right;
}
.navbar{
height: 10vh;
}
.middleitem{
margin: 0 auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav navbarleft">
<li class="nav-item">
<a class="nav-link" href="#">NEWS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MUSIC</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">VIDEO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PHOTOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">STORE</a>
</li>
</ul>
<ul class = "navbar-nav navbarmiddle" style="margin: 0 auto; text-align: center;">
<span class="middleitem">2 CHAINZ</span>
</ul>
<ul class = "navbar-nav navbarright navbar-right" style="float: right;">
<li class="nav-item">
</li>
</ul>
</div>
</nav>
<div></div>
<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body></html>
I have two problems, the first is the position of 2 CHAINZ in its parent ul. I want it to be in the middle of ul element. I tried to use margin: 0 auto; and text-align: center; but they don't work, it always stays in left.
The second is I tried to float the facebook icon to right, I put float: right; there, but it still doesn't work. Could you help me out? Thanks!
Also, I tried to put it in the jsfiddle http://jsfiddle.net/raua0Lku/ but it can't show the navbar. But it works well on my laptop chrome. Why is this...
update:
I just make some change to make 2 CHAINZ in the middle but I still didn't figure out how to make facebook icon in the right..
Here's a clean solution that doesn't require any css hacks and works with native Bootstrap 4 classes only (click the "run code snippet" button and expand to full window to check):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand d-block d-lg-none" href="#">2 CHAINZ</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="#">NEWS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MUSIC</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">VIDEO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PHOTOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">STORE</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>
<a class="navbar-brand d-none d-lg-block" href="#">2 CHAINZ</a>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Notice how the first 2 CHAINZ element has the classes d-block d-lg-none which make it appear on smaller screens but disappear on large (lg) screens.
The other 2 CHAINZ element that sits in the middle only appears on large (lg) screens but disappears on smaller screens.
The ml-auto class (margin-left:auto) on the icon pushes the 2 CHAINZ element towards the middle which always keeps it centered.
Try it;
<ul class = "navbar-nav navbarmiddle" style="margin: 0 auto; text-align: center;">
2 CHAINZ
</ul>
<ul class = "navbar-nav navbarright" style="float: right;">
</ul>
Finally, if you change css file, your site refresh ctrl + f5. There may be a cache related issue.

Categories