This question already has answers here:
Bootstrap dropdown sub menu missing
(11 answers)
Closed 1 year ago.
I am looking for an explanation on how the CSS selectors work to make it so that the Sub Menu is only shown when the parent element for that Sub Menu is hovered over. To my understanding there is a pure CSS solution for this with the use of :hover and the CSS display property however I do not understand how to use the two together to make the sub menu do what I want it to do. I have a hunch that the .dropdown-menu class is overwriting the display:hidden within the CSS for the submenu.
I have tried adding in some CSS in the selector .navbar .nav-item .submenu { display: hidden; position: absolute; left:100%; top:35px;} to hide the Sub Menu in the navbar. Once the Sub Menu is hidden I should be able to just show it again by using :hover on the parent element but I am unsure which element that would be as I have tried a mix of CSS selectors with no avail.
Here is the code for the page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body style="">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark" style="background-color: black;">
<div class="container-fluid">
<a class="navbar-brand" href="#">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> People </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href="#">Professional Institutions</a></li>
<li class="dropdown-submenu">
<li><a class="dropdown-item text-white" href="#">My New Drop Down</a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item text-white" href="#">Sub Area 1</a></li>
<li><a class="dropdown-item text-white" href="#">Sub Area 2</a></li>
<li><a class="dropdown-item text-white" href="#">Sub Area 3</a></li>
</ul>
</li>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Products </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href=""> Actuation Systems</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Knowledge </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href=""> A S Knowledge</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Policy Deployment </a>
<ul class="dropdown-menu">
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"> Processes And Procedures </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item text-white" href="#"> Quality Management System</a></li>
<li><a class="dropdown-item text-white" href="#"> Buissness Management System </a></li>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</div> <!-- container-fluid.// -->
</nav>
<style>
#media all and (min-width: 1200px) {
.nav-link {
font-size: 25px
}
.navbar .nav-item .dropdown-menu {
display: hidden;
font-size: 20px
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
background: rgba(66, 66, 66, 0.4)
}
.dropdown-menu>li:hover {
background-color: black
}
.dropdown-menu .dropdown-item:hover {
background-color: black;
}
.navbar .nav-item .submenu {
display: hidden;
position: absolute;
left: 100%;
top: 35px;
}
}
</style>
</body>
</html>
Here is the code again: https://jsfiddle.net/p0etz8jg/
How it works:
The collapse JavaScript plugin is used to show and hide content.
Buttons or anchors are used as triggers that are mapped to specific
elements you toggle. Collapsing an element will animate the height
from its current value to 0. Given how CSS handles animations, you
cannot use padding on a .collapse element. Instead, use the class as
an independent wrapping element.
Bootstrap Collapse
Related
I have a nav bar with dropdowns that appear when hovered over. That part works perfectly. However if you click on the parent or element the dropdown moves to the far left of the screen. I want it to just stay where it is even if this is clicked on. I'll include my html and css code below. Any help getting this element to stay where it is when the screen is expanded would be helpful. I am using bootstrap 5 by the way.
navbar.html
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="/">
<img class="navbar-logo" src="{% static 'site_base/images/image.png' %}" alt="Logo">
</a>
<button class="navbar-toggler navbar-dark" type="button" data-bs-toggle="collapse" data-bs-target="#main-navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-end" id="main-navigation">
<ul class="navbar-nav ms-auto d-flex justify-content-end">
<li class="nav-item">
<p class="nav-link dropdown-toggle" data-bs-toggle="dropdown">Dropdown 1</p>
<ul class="dropdown-menu text-end dropdown-menu">
<li class="dropdown-item">Sub-item-1</li>
<li class="dropdown-item">Sub-item-2</li>
<li class="dropdown-item">Sub-item-3</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Products</a>
<ul class="dropdown-menu text-end">
<li class="dropdown-item">Product 1</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Resources</a>
<ul class="dropdown-menu text-end">
<li class="dropdown-item">User Guides</li>
<li class="dropdown-item">Videos</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/company">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact-us">Contact Us</a>
</li>
</ul>
</div>
</nav>
style.css
#media all and (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
display: none;
}
.navbar .nav-item:hover .nav-link {
}
.navbar .nav-item:hover .dropdown-menu {
display: block;
}
}
/* ============ desktop view .end// ============ */
/* ============ small devices ============ */
#media (max-width: 991px) {
.dropdown-menu .dropdown-menu {
margin-left: 0.7rem;
margin-right: 0.7rem;
margin-bottom: 0.5rem;
}
}
I got a problem, I do not know what is the problem with the hover menu but it disappears too fast
<div class="dropdown">
<li class="nav-item log-main">
Member
<ul class=" dropdown-menu log">
<li>Sign up</li>
<li>Log in</li>
</ul>
</li>
</div>
css:
.navbar .nav-item ul.log{
display: none;
list-style-type:none;
}
.navbar .dropdown-menu:hover ul.log{
display: block;
}
.log a{
color:var(--main-text-color);
font-family:var(--main-text-font);
font-size: 24px;
}
You need to use :hover pseudo class on .log-main:hover to show the next ul which will be .dropdown-menu
Live Demo:
.navbar .nav-item ul.log {
display: none;
list-style-type: none;
}
.log-main:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.log a {
color: var(--main-text-color);
font-family: var(--main-text-font);
font-size: 24px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="dropdown">
<li class="nav-item log-main">
Member
<ul class="dropdown-menu log">
<li>Sign up</li>
<li>Log in</li>
</ul>
</li>
</div>
You need to add hover to the element that is visible and the dropdown that is hidden.
.dropdown:hover .dropdown-menu,
.dropdown .dropdown-menu:hover{
display: block;
position: absolute;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<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">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
Picture for navbar :
Expected :
Reality :
can I get fix for that
my navbar code
<nav class="navbar navbar-default navbar fixed-top">
<div class="container-fluid">
<div class="navbar-header">
NavbarBrand
</div>
<nav class="nav navbar-nav navbar-right">
<li>Link</li>
<li>A</li>
<li>A</li>
</ul>
</div>
</nav>
a:link {
color: gray;
}
.nav-link:hover {
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<nav class="nav bg-dark text-white">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
also check this fiddle.
for get navbar middle of the page use <ul class="nav justify-content-center"> for get the nav at right side of page use <ul class="nav justify-content-end"> for more about bootstrap basenav
<div class="navigation">
<div class="navigation__container">
<div class="navigation__container_logo">
NavbarBrand
</div>
<nav class="navigation__container_menu">
<ul class="navigation__container_menu_list">
<li class="navigation__container_menu_list--item">
link
</li>
<li class="navigation__container_menu_list--item">
link
</li>
</ul>
</nav>
</div>
</div>
.navigation{
padding: 10px;
&__container{
display: flex;
align-items: center;
border: solid 1px #000;
border-right-color: transparent;
border-left-color: transparent;
padding: 5px 20px;
&_logo{
max-width: 100%;
}
&_menu{
flex: 1;
max-width: 100%;
&_list{
display: flex;
justify-content: flex-end;
align-items: center;
&--item{
margin-right: 10px;
> a{
color: #000;
font-size: 12px;
}
&:hover{
>a {
color:#f90;
}
}
}
}
}
}
}
HTML
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="logo horizontal-logo" src="LOGO link" alt="logo">
</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 ml-auto">
<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="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<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" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
body {
background: #f2f2f2;
}
.navbar .nav-item:not(:last-child) {
margin-right: 35px;
}
.dropdown-toggle::after {
transition: transform 0.15s linear;
}
.show.dropdown .dropdown-toggle::after {
transform: translateY(3px);
}
.dropdown-menu {
margin-top: 0;
}
JS
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";
$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});
Hi I have read your code and I had previously solved the same issue for someone else, I have made a small and simple navigation system in CodePen which will help you fix the alignment issue of your navigation system. Additionally, there are three line of code which do not need to be there in the html file. They are <div class="container-fluid"> and <li>A</li> and <nav class="navbar navbar-default navbar fixed-top">.
When building the navigation system you do not need to declare that it is a navigation bar in the html file, the <ul> tag and <li> tag are an unordered list in the first place and all navigation bars are an unordered list. Furthermore, I have added the CSS code to help you fix the alignment of the unordered list, and there is a code which will sort out any white space in you navigation system
Additionally, the navigation bar in the link below does not use any bootstrap tools, the navigation bar is purely css and html. I hope this link is helpful
Here is a link below:
[https://codepen.io/X_Viperxz72/pen/zYrEZGB]
So trying to achieve responsive collapsible navigation with two rows, where first includes logo and language select and second row main links:
| |
| LOGO lang |
| link1 link2 link3 link4 |
jsfiddle snippet of progress so far
Cant get equal width for the main links, so that are distributed horizontally evenly on lg viewport and above. With the structure and classes am using links are stacked very tight.
Second row navigation:
<ul class="navbar-nav nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Categories
</a>
<div class="dropdown-menu">
<a class="dropdown-item">Cat 1</a>
<a class="dropdown-item">Cat 2</a>
<a class="dropdown-item">Cat 3</a>
<a class="dropdown-item">Cat 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
Any ideas how to override classes or other solution? Thanks!
Specify the initial size of your flex items (li) to match content by changing the flex-basis from 0 to auto -- you can enable in Bootstrap 4 by using the flex-fill class. Add it to your HTML:
<li class="nav-item flex-fill">
<a class="nav-link" href="#">Live Auction</a>
</li>
Or add the property in your CSS:
.nav-justified li.nav-item {
/* ... */
flex-basis: auto;
}
Fiddle example: https://jsfiddle.net/wcj1gzr5/1/
To distribute flex items with an effect like justify-content: space-between the width of the div and ul which contain the flex items should expand their width (giving available space to distribute flex items). To do this, set min-width: 100%; on both elements to have them fill their containing element and then use justify-content on the ul to control spacing & positioning.
Fiddle example: https://jsfiddle.net/wcj1gzr5/2/
You can do this by adding width:100% to .navbar-collapse, .nav-pills. Below is the snippet for the same
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<style>
.navbar-collapse,
.nav-pills {
width: 100% !important
}
header {
width: 100%;
background: #282828;
background-position-x: 0%;
background-position-y: 0%;
background-image: url("https://cdn.wallpapersafari.com/65/40/cJtjUm.jpg");
background-size: cover;
background-position: center;
}
/* center the logo */
.navbar {
justify-content: center;
}
/* in order to center the logo */
.navbar .navbar-toggler {
position: absolute;
right: 1rem;
top: 0.5rem;
}
/* center all navbar items */
.navbar-nav {
align-items: center;
}
/* since it's expanding at lg */
#media (min-width: 992px) {
/* in order to display in 2 rows */
.navbar-expand-lg {
flex-flow: column nowrap;
}
/* same logic as the navbar-toggler above */
.navbar-nav.upper-controls {
position: absolute;
right: 1rem;
top: 0.5rem;
font-size: 85%;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light">
<a href="#" class="navbar-brand">
CompanyLogo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav upper-controls">
<li class="nav-item">
<a class="nav-link" href="#">Language</a>
</li>
</ul>
<ul class="navbar-nav nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Categories
</a>
<div class="dropdown-menu">
<a class="dropdown-item">Cat 1</a>
<a class="dropdown-item">Cat 2</a>
<a class="dropdown-item">Cat 3</a>
<a class="dropdown-item">Cat 4</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Live Auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
</body>
</html>
li.nav-item { display: block; width: 100%; position: relative; display: lock; min-height: 40px; line-height: 2.4; padding: 0; color: #f0f0f0; font-weight: 600; font-size: 16px; border-bottom: 1px solid #092a3b; background: #233d4a; margin: 0;
}
a {
display:block;
}
a.active {
background-color:red;
}
<ul>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">1</a>
<div id="collapseOne" class="collapse" data-parent="#Menu">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item" data-parent="#collapseOne">
<a class="" data-toggle="tab" href="#One1">1.1</a>
</li>
<li class="nav-item" data-parent="#collapseOne">
<a class="" data-toggle="tab" href="#One2">1.2</a>
</li>
<li class="nav-item" data-parent="#collapseOne">
<a class="" data-toggle="tab" href="#One3">1.3</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="collapse" href="#" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">2</a>
<div id="collapseTwo" class="collapse" data-parent="#Menu">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="" data-toggle="tab" href="#Two1">2.1</a>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Two2">2.2</a>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Two3">2.3</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Three">3</a>
</li>
<li class="nav-item">
<a class="" data-toggle="tab" href="#Four">4</a>
</li>
</ul>
I am struggling to achieve a multi level tablist menu with collapsible sub menus with Bootstrap 4. I need to use tabs and collapse at the same time. I have achieved to make the functionality (the right panes appearing and disappearing clicking the right links) work properly but there are more than one tab with the active class at the same time. I would like to know if there´s a way to make it work properly just with bootstrap 4 classes not adding more js/jquery code.
Here´s my codepen:
https://codepen.io/AlbertoAguado/pen/XqdmbK
The problem is combining tabs and collapse on the same parent level. Currently, 1&2 toggle tabs, and 3&4 toggle collapse. You need to make them all collapse with tabs inside (exactly like collapse 1&2), or make them all collapse items inside the #Menu.
Additionally, you need to hide any shown tabs when one of the collapse elements is hidden..
$('.collapse').on('hide.bs.collapse', function () {
$('.tab-content .show').removeClass('show');
})
https://codeply.com/go/Aq4zWAcUkX