I am using bootstrap 4 to create a navigational menu. My navigational items each contain a dropdown menu. When clicked I want this menu to display the same size and be horizontally centered on the page. Ideally, I want this dropdown menu to be the same size as the ul element. At the moment I can't figure out how to do this as I am relatively new to bootstrap.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-light bg-primary py-0">
<div class="container h-100">
<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 h-100" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto mx-auto h-100">
<li class="nav-item dropdown px-2">
<a class="nav-link dropdown-toggle text-white" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Flat Roofing
</a>
<div class="dropdown-menu border border-primary row mx-auto" aria-labelledby="flatRoofingDropdown">
<div class="container">
<div class="row">
<div class="col-md-4">
<a class="dropdown-item text-primary" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
<a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item" href="/category/duoply">Duoply</a>
<a class="dropdown-item text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
<a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
<a class="dropdown-item text-primary" href="/category/torch-on-felt">Roofing Felt</a>
<a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
<a class="dropdown-item text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item" href="/category/osb">OSB</a>
</div>
<div class="col-md-4">
<a class="dropdown-item text-primary" href="/category/green-roofing">Green Roof System</a>
<a class="dropdown-item" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a>
<a class="dropdown-item text-primary" href="/category/liquid-waterproofing-systems">Liquid Waterproofing</a>
<a class="dropdown-item" href="/category/elastathane">Elastathane 25</a>
<a class="dropdown-item" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Liquid Rubber</a>
<a class="dropdown-item text-primary" href="#">Skylights</a>
<a class="dropdown-item" href="#">Flat Glass Rooflights</a>
<a class="dropdown-item" href="#">Domes</a>
<a class="dropdown-item text-primary" href="#">Flat Roof Outlets</a>
<a class="dropdown-item" href="/category/flat-roof-outlets">Water Outlets</a>
<a class="dropdown-item" href="/category/flat-roof-vents">Flat Roof Vents</a>
</div>
<div class="col-md-4">
<a class="dropdown-item navbar-brand text-primary h5" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
<a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item" href="/category/duoply">Duoply</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
<a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/torch-on-felt">Roofing Felt</a>
<a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item" href="/category/osb">OSB</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Current behaviour:
Expected outcome, centered, and the same size:
result from suggested fix:
Add below CSS.
.dropdown {
position: initial;
}
#media (min-width: 768px) {
.dropdown-menu {
width: 50rem; /* JUST FOR STYLING PURPOSE OF DROPDOWN */
position: absolute;
left: 50% !important;
transform: translateX(-50%) !important;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-md navbar-light bg-primary py-0">
<div class="container h-100">
<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 h-100" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto mx-auto h-100">
<li class="nav-item dropdown px-2">
<a class="nav-link dropdown-toggle text-white" href="/category/flat-roof-materials" id="flatRoofingDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Flat Roofing
</a>
<div class="dropdown-menu border border-primary row mx-auto" aria-labelledby="flatRoofingDropdown">
<div class="container">
<div class="row">
<div class="col-md-4">
<a class="dropdown-item text-primary" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
<a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item" href="/category/duoply">Duoply</a>
<a class="dropdown-item text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
<a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
<a class="dropdown-item text-primary" href="/category/torch-on-felt">Roofing Felt</a>
<a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
<a class="dropdown-item text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item" href="/category/osb">OSB</a>
</div>
<div class="col-md-4">
<a class="dropdown-item text-primary" href="/category/green-roofing">Green Roof System</a>
<a class="dropdown-item" href="/category/green-roofing?filter232=GrufeKit&page=1">Grufe kit</a>
<a class="dropdown-item text-primary" href="/category/liquid-waterproofing-systems">Liquid Waterproofing</a>
<a class="dropdown-item" href="/category/elastathane">Elastathane 25</a>
<a class="dropdown-item" href="/category/hydrosil-silicone-roof-coating">Hydrosil</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Liquid Rubber</a>
<a class="dropdown-item text-primary" href="#">Skylights</a>
<a class="dropdown-item" href="#">Flat Glass Rooflights</a>
<a class="dropdown-item" href="#">Domes</a>
<a class="dropdown-item text-primary" href="#">Flat Roof Outlets</a>
<a class="dropdown-item" href="/category/flat-roof-outlets">Water Outlets</a>
<a class="dropdown-item" href="/category/flat-roof-vents">Flat Roof Vents</a>
</div>
<div class="col-md-4">
<a class="dropdown-item navbar-brand text-primary h5" href="/category/epdm-rubber-roofing">EPDM Rubber Roofing</a>
<a class="dropdown-item" href="/category/classicbond">ClassicBond</a>
<a class="dropdown-item" href="/category/firestone-rubbercover">Firestone</a>
<a class="dropdown-item" href="/category/duoply">Duoply</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/fibreglass-grp-roofing-systems">Fibreglass GRP</a>
<a class="dropdown-item" href="/category/fibreglass-grp-roofing-systems?filter232=Cromar&page=1">ProGRP</a>
<a class="dropdown-item" href="/category/flexitec-2020">Flexitec 2020</a>
<a class="dropdown-item" href="/tools/flexitec-calculator">Flexitec 2020 Roof Calculator</a>
<a class="dropdown-item" href="/tools/grp1010-calculator">GRP Roof 1010</a>
<a class="dropdown-item" href="/category/ultraflex">Ultraflex</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/torch-on-felt">Roofing Felt</a>
<a class="dropdown-item" href="/category/torch-on-felt">Torch on felts</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item navbar-brand text-primary" href="/category/timber-sheeting">Timber Sheeting</a>
<a class="dropdown-item" href="/category/osb">OSB</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Related
I am beginner web developer. I make project in Bootstrap 4.
I have small problem with to large space between menu items (top menu, nav)
I have this code:
<nav class="navbar navbar-expand-lg text-body px-md-0 pb-md-0 navbar-light w-100">
<a class="navbar-brand" href="/"><img src="http://roelle.test/img/logo.jpg" class="pb-2"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu"
aria-controls="navbarmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="navbar-nav">
<form class="mx-lg-5" action="" method="">
<div class="inner-addon rounded-0 navbar-search-form">
<i class="fa fa-search"></i>
<input type="text" class="form-control" placeholder="Szukaj produktu"
aria-label="Szukaj produktu" name="query"/>
</div>
</form>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown1" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Kategorie <i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown1" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Books <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown2" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- Comic Book <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown2">
<a class="dropdown-item"
href="produkty/marvel-comic-book">- Marvel Comic Book</a>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle"
href="#"
id="navbarDropdown4"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">- DC Comic Book
<i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown4">
<a class="dropdown-item"
href="produkty/computer-science">- Computer Science</a>
</div>
</div>
<a class="dropdown-item"
href="produkty/action-comics">- Action comics</a>
</div>
</div>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown6" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- Textbooks <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown6">
<a class="dropdown-item"
href="produkty/business">- Business</a>
<a class="dropdown-item"
href="produkty/finance">- Finance</a>
</div>
</div>
</div>
</div>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown10" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Electronics <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown10">
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown11" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- TV <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown11">
<a class="dropdown-item"
href="produkty/led">- LED</a>
<a class="dropdown-item"
href="produkty/blu-ray">- Blu-ray</a>
</div>
</div>
<div class="dropdown">
<a class="dropdown-item dropdown-toggle" href="#"
id="navbarDropdown14" role="button"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">- Mobile <i
class="fas fa-angle-down"></i></a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdown14">
<a class="dropdown-item"
href="produkty/samsung">- Samsung</a>
<a class="dropdown-item"
href="produkty/iphone">- iPhone</a>
<a class="dropdown-item"
href="produkty/xiomi">- Xiomi</a>
</div>
</div>
</div>
</div>
<a class="dropdown-item"
href="produkty/no-1">no 1 </a>
<a class="dropdown-item"
href="produkty/no-1-disable">no 1 disable </a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Dla klienta <i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="/p/kontakt">Kontakt</a>
<a class="dropdown-item" href="/p/koszty-i-warunki-dostawy">Koszty i warunki dostawy</a>
<a class="dropdown-item" href="/p/o-nas">O nas</a>
<a class="dropdown-item" href="/p/polityka-prywatnosci">Polityka prywatności</a>
<a class="dropdown-item" href="/p/pomoc">Pomoc</a>
<a class="dropdown-item" href="/p/poradnik">Poradnik</a>
<a class="dropdown-item" href="/p/raty">Raty</a>
<a class="dropdown-item" href="/p/regulamin">Regulamin</a>
<a class="dropdown-item" href="/p/reklamacje-i-zwroty">Reklamacje i zwroty</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="http://roelle.test/kontakt">Kontakt</a>
</li>
<li class="nav-item">
<li class="nav-item position-relative">
<a class="nav-link" href="http://roelle.test/koszyk"><img
src="http://roelle.test/img/basket.jpg" class="pl-lg-4 pr-2">
<span
class="badge badge-primary count">0</span>
<span class="d-lg-none d-xl-inline">Koszyk</span></a>
</li>
</ul>
</div>
</nav>
$('.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;
});
I have preview : http://serwer1356363.home.pl/_nauka/
Why after expanding Category => Books is there such a big gap between Books and Comic Books and then Comics and Marvel Comic Book?
How can I repair it?
Please help me
Remove the line of code shown in the image.
And add the following to your css
.dropdown-menu { margin: 0; padding: 0; }
It should be fine now
I am a beginner web developer. I use in my project Bootstrap 4.
I have this code:
<nav class="navbar navbar-expand-lg text-body px-md-0 pb-md-0 navbar-light w-100">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu"
aria-controls="navbarmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon "></span>
</button>
<div class="collapse navbar-collapse" id="navbarmenu">
<ul class="navbar-nav">
<form class="mx-lg-5">
<div class="inner-addon rounded-0 navbar-search-form">
<i class="fa fa-search"></i>
<input type="text" class="form-control" placeholder="Szukaj produktu"
aria-label="Szukaj produktu"/>
</div>
</form>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown1" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Option <i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">Option <i class="fas fa-angle-down"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<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>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="img/profile.jpg" class="pl-lg-4 pr-2"><span class="d-lg-none d-xl-inline">Zaloguj się</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="img/basket.jpg" class="pl-lg-4 pr-2"><span class="d-lg-none d-xl-inline">Koszyk</span></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
Preview: http://serwer1356363.home.pl/_nauka/
I need to add the number of products in the basket to my basket icon as this screen:
https://ibb.co/PcvM9Dr
How can I make it?
Please help me
You can use this code
Additional CSS :
.count{
width: 15px;
height: 15px;
border-radius: 15px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
position: absolute;
top: 15px;
left: 60px;
background: #ff420f;
}
Finally in HTML:
<li class="nav-item position-relative">
<a class="nav-link" href="#"><img src="img/basket.jpg" class="pl-lg-4 pr-2">
<span class="badge badge-primary count">5</span >
<span class="ml-2 d-lg-none d-xl-inline">Koszyk</span></a>
</li>
Dont forget to add class .position-relative inside li.nav-item
Hi am using bootstrap 4 and designed menu bar with caret. In that i am facing two issues.
1) when i click the button (eg LAPTOP,MObile) dropdown appears but the caret not changed. when i click the caret dropdown appears and caret changed .
2) once i click the menu dropdown appears the arrow changed but when i click another menu from the same menubar
Use this code... I have udpate this without js or jquery.
/* Type 3 */
.nav-link-type-three {
padding-right: 2.5rem !important;
padding-left: 1.5rem !important;
color: white !important;
text-decoration: none;
}
.nav-link-type-three:hover{
text-decoration: none;
}
.nav-link-type-three::after, li.show .nav-link-type-three::after{
right: -7px;
color: #fff;
font-size: 17px;
top: 1px;
font-family: FontAwesome;
content: "\f0d7";
position: relative;
}
.nav-link-type-three::after, li.show .nav-link-type-three::after{
content: "\f0d7";
}
li.show .nav-link-type-three::after{
content: "\f0d8";
color: #232323;
}
.navbar-dark .navbar-nav .show>.nav-link-type-three {
color: #232323 !important;
text-decoration: none
}
.bg-dark-type-three {
background-color: #29a4d0 !important;
}
/* Default image size */
img {
max-width: 40px;
min-height: 40px;
}
/* images space */
.col-md-2 {
margin-left: 2%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three">
<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="navbar-nav">
<li class="nav-item dropdown nav-org">
<a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
LAPTOP
</a>
<div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
</div>
<h6> lg </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
alt="">
</div>
<h6> sony </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
alt="">
</div>
<h6> acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> dell</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true"
alt="">
</div>
<h6> HP </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
SPEAKERS
</a>
<div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
alt="">
</div>
<h6>Mono </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt="">
</div>
<h6>jass </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&wid=1250"
alt="">
</div>
<h6>iBall </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
alt="">
</div>
<h6>Zebronics </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt="">
</div>
<h6>Senizer </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOBILES
</a>
<div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt="">
</div>
<h6> iphone 7</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center ">
<div>
<img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
alt="">
</div>
<h6>samsung </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt="">
</div>
<h6> Motorola </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt="">
</div>
<h6> iphone 6s</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt="">
</div>
<h6>redmi </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
CAMARA
</a>
<div class="dropdown-menu dropdown-menu-four" 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>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
DESKTOP
</a>
<div class="dropdown-menu dropdown-menu-five" 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>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
REFURBISHED
</a>
<div class="dropdown-menu dropdown-menu-six" 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>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ACCESSORIES
</a>
<div class="dropdown-menu dropdown-menu-seven" 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>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOTHERBOARD
</a>
<div class="dropdown-menu dropdown-menu-eight" 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>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
You were close. You have to point to the proper class, and then find the caret-icon elements to switch the caret.
$(document).ready(function () {
$('.nav-link-type-three').on('click', function () {
if ($(this).find('.caret-icon').hasClass('fa-caret-down')) {
$(this).find('.caret-icon').removeClass('fa-caret-down').addClass('fa-caret-up');
} else {
$(this).find('.caret-icon').removeClass('fa-caret-up').addClass('fa-caret-down');
}
});
});
/* Type 3 */
.nav-link-type-three {
padding-right: 2.5rem !important;
padding-left: 1.5rem !important;
color: white !important;
text-decoration: none
}
.navbar-dark .navbar-nav .show>.nav-link-type-three {
color: #232323 !important;
text-decoration: none
}
.bg-dark-type-three {
background-color: #29a4d0 !important;
}
/* Default image size */
img {
max-width: 40px;
min-height: 40px;
}
/* images space */
.col-md-2 {
margin-left: 2%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three">
<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="navbar-nav">
<li class="nav-item dropdown nav-org">
<a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
LAPTOP <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
</div>
<h6> lg </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
alt="">
</div>
<h6> sony </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
alt="">
</div>
<h6> acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> dell</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true"
alt="">
</div>
<h6> HP </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
SPEAKERS <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
alt="">
</div>
<h6>Mono </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt="">
</div>
<h6>jass </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&wid=1250"
alt="">
</div>
<h6>iBall </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
alt="">
</div>
<h6>Zebronics </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt="">
</div>
<h6>Senizer </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOBILES <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt="">
</div>
<h6> iphone 7</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center ">
<div>
<img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
alt="">
</div>
<h6>samsung </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt="">
</div>
<h6> Motorola </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt="">
</div>
<h6> iphone 6s</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt="">
</div>
<h6>redmi </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
CAMARA <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-four" 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>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
DESKTOP <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-five" 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>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
REFURBISHED <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-six" 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>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ACCESSORIES <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-seven" 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>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOTHERBOARD <i class="caret-icon fa fa-caret-down"></i>
</a>
<div class="dropdown-menu dropdown-menu-eight" 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>
</nav>
</div>
<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>
The problem is in the second row of your jQuery.
$('.fa-caret-down').on('click', function () {}
Instead of targeting .fa-caret-down which is a class used by icon you should target the entire button.
$('button').on('click', function () {}
NOTE: I wrote button but you need to target specific tag nav-link in your case.
Here I am listing hour and minute in two different buttons. I can able to drop down hour and minute, but not showed selected value in button.
<div class="btn-group btn-group-sm" role="group">
<button id="startHour" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">hour</button>
<div class="dropdown-menu" aria-labelledby="startHour">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">11</a>
<a class="dropdown-item" href="#">12</a>
</div>
<span style="color:white; background-color:#5A6268">:</span>
<div class="btn-group btn-group-sm" role="group">
<button id="startMinute" type="button" class="btn btn-secondary"
data-toggle="dropdown" href="#">min</button>
<div class="dropdown-menu" aria-labelledby="startMinute">
<a class="dropdown-item" href="#">00</a>
<a class="dropdown-item" href="#">05</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">15</a>
<a class="dropdown-item" href="#">20</a>
<a class="dropdown-item" href="#">25</a>
<a class="dropdown-item" href="#">30</a>
<a class="dropdown-item" href="#">35</a>
<a class="dropdown-item" href="#">40</a>
<a class="dropdown-item" href="#">45</a>
<a class="dropdown-item" href="#">50</a>
<a class="dropdown-item" href="#">55</a>
</div>
<button type="button" class="btn btn-secondary">am</button>
<button type="button" class="btn btn-secondary">zone</button>
<button type="button" class="btn btn-primary">Set</button>
</div>
And javascript I used
$(".dropdown-menu a").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.btn-secondary').html(selText);
});
By using above js code I can able to display selected value in button, but it changes value to all drop down list.
Here is the screenshots which i am getting
it changing value for all – PvDev
Is your problem the dropdown or setting the values to the right section? Maybe this will help. Not sure if i understood your question:
Jquery
$(".dropdown-menu a").click(function(){
var selText = $(this).text();
var currentBtn = $(this).closest(".btn-group").children("button");
var currentUnit = currentBtn.data("unit");
currentBtn.html(selText);
console.log(currentUnit);
$("."+ currentUnit).text(selText);
});
Html
<div class="btn-group btn-group-sm" role="group">
<button id="startHour" type="button" data-unit="hours" class="btn btn-secondary" data-toggle="dropdown" href="#">hour</button>
<div class="dropdown-menu" aria-labelledby="startHour">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">11</a>
<a class="dropdown-item" href="#">12</a>
</div>
<span style="color:white; background-color:#5A6268">:</span>
</div>
<div class="btn-group btn-group-sm" role="group">
<button id="startMinute" type="button" data-unit="minutes" class="btn btn-secondary" data-toggle="dropdown" href="#">min</button>
<div class="dropdown-menu" aria-labelledby="startMinute">
<a class="dropdown-item" href="#">00</a>
<a class="dropdown-item" href="#">05</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">15</a>
<a class="dropdown-item" href="#">20</a>
<a class="dropdown-item" href="#">25</a>
<a class="dropdown-item" href="#">30</a>
<a class="dropdown-item" href="#">35</a>
<a class="dropdown-item" href="#">40</a>
<a class="dropdown-item" href="#">45</a>
<a class="dropdown-item" href="#">50</a>
<a class="dropdown-item" href="#">55</a>
</div>
</div>
<div class="output">
<button type="button" class="hours btn btn-secondary">am</button>
<button type="button" class="minutes btn btn-secondary">zone</button>
<button type="button" class="seconds btn btn-primary">Set</button>
</div>
https://jsfiddle.net/Rakowu/t982sLuj/1/
I gave your group elements a data attr to figure out what kind of unit your clicking on. Than i select the output element with the callback.
Hope it will help
(If there are ideas on how reduce my code i'll glad to here about it :D)
You forgot to close the divs
$(".dropdown-menu a").click(function() {
var selText = $(this).text();
$(this).parents('.btn-group').find('.btn-secondary').html(selText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="btn-group btn-group-sm" role="group">
<button id="startHour" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">hour</button>
<div class="dropdown-menu" aria-labelledby="startHour">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
<a class="dropdown-item" href="#">6</a>
<a class="dropdown-item" href="#">7</a>
<a class="dropdown-item" href="#">8</a>
<a class="dropdown-item" href="#">9</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">11</a>
<a class="dropdown-item" href="#">12</a>
</div>
</div>
<span style="color:white; background-color:#5A6268">:</span>
<div class="btn-group btn-group-sm" role="group">
<button id="startMinute" type="button" class="btn btn-secondary" data-toggle="dropdown" href="#">min</button>
<div class="dropdown-menu" aria-labelledby="startMinute">
<a class="dropdown-item" href="#">00</a>
<a class="dropdown-item" href="#">05</a>
<a class="dropdown-item" href="#">10</a>
<a class="dropdown-item" href="#">15</a>
<a class="dropdown-item" href="#">20</a>
<a class="dropdown-item" href="#">25</a>
<a class="dropdown-item" href="#">30</a>
<a class="dropdown-item" href="#">35</a>
<a class="dropdown-item" href="#">40</a>
<a class="dropdown-item" href="#">45</a>
<a class="dropdown-item" href="#">50</a>
<a class="dropdown-item" href="#">55</a>
</div>
</div>
I have created a navbar with Bootstrap 4. When I click on a drop-down menu link, it opens and remains open — when I hover on another drop-down link, they overlap.
I want it such that a dropdown link will be closed if I hover on another dropdown link.
Here is the code of my navbar drop-down:
.dropdown:hover>.dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Welcome - Maqbool Solutions
</title>
<link rel="shortcut icon" href="../images/favion_Y13_5.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="../../js/function.js"></script>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="font/css/font-awesome.css">
</head>
<body>
<div class="container-fluid">
<!--main container-->
<!-- navbar-->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar" style=" height: 80px;">
<div id="logo">
<a href="index.html">
<h3 class="logo_text">Maqbool Solutions</h3>
</a>
</div>
<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" id="ul">
<li class="nav-item " align="center">
<i class="fa fa-home " aria-hidden="true"></i>
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cubes" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="products/ims/ims.html">Institute Managment Systems</a>
<a class="dropdown-item" href="products/pnms/pnms.html">Pension Managment Systems</a>
<a class="dropdown-item" href="products/pms/pms.html">Property Managment Systems</a>
<a class="dropdown-item" href="products/labms/labms.html">Laboratory Managment Systems</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="products/apps/apps.html">Apps</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cogs" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="services/skill_service.html">Training and Skills</a>
<a class="dropdown-item" href="services/indestrial_services.html">Industry Expertise</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/web_service.html">Web services</a>
<a class="dropdown-item" href="services/software_service.html">Software services</a>
<a class="dropdown-item" href="services/animation_service.html">Animation services</a>
<a class="dropdown-item" href="services/graphic_service.html">Graphic services</a>
<a class="dropdown-item" href="services/game_service.html">Game services</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/apps_service.html">App services</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Training
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="training/soft.html">Software Designing & Development</a>
<a class="dropdown-item" href="training/design.html">Designing & Composing</a>
<a class="dropdown-item" href="training/web.html">Web Designing & Development</a>
<a class="dropdown-item" href="training/animation.html">2D&3D Animation & Development </a>
<a class="dropdown-item" href="training/game.html">Game Development </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="training/app.html">App Development </a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="aboutus/hwr.html">Who we are</a>
<a class="dropdown-item" href="aboutus/our_vision.html">Our vision</a>
<a class="dropdown-item" href="aboutus/our_team.html">Our Team</a>
<a class="dropdown-item" href="aboutus/policy.html">Privacy & Policy</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="career/jobs.html">Jobs</a>
<a class="dropdown-item" href="career/inter.html">Internship</a>
<a class="dropdown-item" href="career/hiring.html">Our Hirring process</a>
</div>
</li>
<li class="nav-item" align="center">
<i class="fa fa-pencil" aria-hidden="true"></i>
<a class="nav-link" href="contect_us.html">Contact Us</a>
</li>
</ul>
</div>
<hr class="col-md-12 nav_hr">
</nav>
<!--end of navbar-->
</div>
</body>
</html>
You have to add below jQuery code in your custom js file
$('.nav-link').hover(function() {
$(this).closest('.nav-item.dropdown').siblings('.nav-item.dropdown').removeClass('show').find('.dropdown-menu').removeClass('show');
})
The issue is when you click on the dropdown link, a class named show is added to .nav-item.dropdown and .dropdown-menu, So you have to remove show class when you hover on others dropdown link
$('.nav-link').hover(function() {
$(this).closest('.nav-item.dropdown').siblings('.nav-item.dropdown').removeClass('show').find('.dropdown-menu').removeClass('show');
})
.dropdown:hover>.dropdown-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Welcome - Maqbool Solutions
</title>
<link rel="shortcut icon" href="../images/favion_Y13_5.ico" type="image/x-icon">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<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.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<!--main container-->
<!-- navbar-->
<nav class="navbar navbar-expand-lg navbar-custom fixed-top" id="navbar" style=" height: 80px;">
<div id="logo">
<a href="index.html">
<h3 class="logo_text">Maqbool Solutions</h3>
</a>
</div>
<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" id="ul">
<li class="nav-item " align="center">
<i class="fa fa-home " aria-hidden="true"></i>
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cubes" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="products/ims/ims.html">Institute Managment Systems</a>
<a class="dropdown-item" href="products/pnms/pnms.html">Pension Managment Systems</a>
<a class="dropdown-item" href="products/pms/pms.html">Property Managment Systems</a>
<a class="dropdown-item" href="products/labms/labms.html">Laboratory Managment Systems</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="products/apps/apps.html">Apps</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-cogs" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="services/skill_service.html">Training and Skills</a>
<a class="dropdown-item" href="services/indestrial_services.html">Industry Expertise</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/web_service.html">Web services</a>
<a class="dropdown-item" href="services/software_service.html">Software services</a>
<a class="dropdown-item" href="services/animation_service.html">Animation services</a>
<a class="dropdown-item" href="services/graphic_service.html">Graphic services</a>
<a class="dropdown-item" href="services/game_service.html">Game services</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="services/apps_service.html">App services</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Training
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="training/soft.html">Software Designing & Development</a>
<a class="dropdown-item" href="training/design.html">Designing & Composing</a>
<a class="dropdown-item" href="training/web.html">Web Designing & Development</a>
<a class="dropdown-item" href="training/animation.html">2D&3D Animation & Development </a>
<a class="dropdown-item" href="training/game.html">Game Development </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="training/app.html">App Development </a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="aboutus/hwr.html">Who we are</a>
<a class="dropdown-item" href="aboutus/our_vision.html">Our vision</a>
<a class="dropdown-item" href="aboutus/our_team.html">Our Team</a>
<a class="dropdown-item" href="aboutus/policy.html">Privacy & Policy</a>
</div>
</li>
<li class="nav-item dropdown" align="center">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Career
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="career/jobs.html">Jobs</a>
<a class="dropdown-item" href="career/inter.html">Internship</a>
<a class="dropdown-item" href="career/hiring.html">Our Hirring process</a>
</div>
</li>
<li class="nav-item" align="center">
<i class="fa fa-pencil" aria-hidden="true"></i>
<a class="nav-link" href="contect_us.html">Contact Us</a>
</li>
</ul>
</div>
<hr class="col-md-12 nav_hr">
</nav>
<!--end of navbar-->
</div>
</body>
</html>
In your code, while mouse over or click event is fired , "show" class is applied to child menu (dropdown-menu) element.
So you can override that class like:
.dropdown-menu.show {
display: none;
}
to solve your issue and to display menu items only on hover
Simple add following CSS lines:
.dropdown:hover > .dropdown-menu,
.dropdown:hover > .dropdown-menu.show {
display: block;
}
.dropdown > .dropdown-menu,
.dropdown > .dropdown-menu.show {
display: none;
}