Space between menu items in Bootstrap 4 - javascript

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

Related

Adding basket icon quantity of products in the basket in CSS

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

Bootstrap4 dropdown link issue

My dropdown is working perfectly but "Documents" link is not routing to the link.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="./docs/index.html" data-target="./docs/index.html" target="_blank" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Documents</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Admin</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Merchant</a>
</div>
</li>

<li class="nav-item dropdown">
<a href="https://google.com" target="_blank" >Documents</a>
<span class="dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</span>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://google.com" target="_blank">Admin</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://google.com" target="_blank">Merchant</a>
</div>
</li>
change href url as per your requirements.
I hope this will work.

Bootstrap 4 Center Nav Dropdown

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>

1 button is opening 2 dropdowns on bootstrap

I'm creating a 2 different dropdown, however, they're opening the same dropdown menu.
My code;
<div class="d-flex">
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-sliders-h"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">Sort by</span>
</button>
<div class="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
<a class="dropdown-item" href="">Price</a>
<a class="dropdown-item" href="">Amount</a>
<a class="dropdown-item" href="">Number</a>
</div>
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary ml-auto dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-user"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">User</span>
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="account-settings.html">Settings</a>
<a class="dropdown-item" href="account-billing.html">Billing</a>
<a class="dropdown-item" href="account-notifications.html">Notifications</a>
</div>
</div>
How can I fix this?

As the documentation states and shows you:
Wrap the dropdown’s toggle (your button or link) and the dropdown menu
within .dropdown
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
<div class="dropdown">
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-sliders-h"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">Sort by</span>
</button>
<div class="dropdown-menu dropdown-menu-left dropdown-menu-arrow">
<a class="dropdown-item" href="">Price</a>
<a class="dropdown-item" href="">Amount</a>
<a class="dropdown-item" href="">Number</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-icon btn-group-nav shadow-sm btn-secondary ml-auto dropdown-toggle" type="button" data-toggle="dropdown" data-offset="0 8" aria-haspopup="true" aria-expanded="false">
<span class="btn-inner--icon"><i class="far fa-user"></i></span>
<span class="btn-inner--text d-none d-md-inline-block">User</span>
</button>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="account-settings.html">Settings</a>
<a class="dropdown-item" href="account-billing.html">Billing</a>
<a class="dropdown-item" href="account-notifications.html">Notifications</a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Hover issue in navbar with Bootstrap 4

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;
}

Categories

Resources