Develop Reference

Centering content in Bootstrap 5 OffCanvas Navbar

how can I center all of the content in a offcanvas navbar in bootstrap version 5.2? I added "d-flex justify-content-center" class to the container-fluid wrapper of navigation. Even though it aligns content in mobile version, pc version is still not aligned center.
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md bg-light fixed-top">
<div class="container-fluid d-flex justify-content-center">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>

Depending on your actual goals for centering... text-center
<nav class="navbar navbar-expand-md bg-light fixed-top text-center">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md bg-light fixed-top text-center">
<div class="container-fluid d-flex justify-content-center">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>

How to close a sidecart if i click outside of it

i am trying to figure out how i can make my sidecart to close when i click outside of it, here is my scirpt:
const toggler = document.getElementById('menu-toggle');
const cartWrapper = document.getElementById('wrapper');
var crossButton = document.getElementById('closeCart');
// Displaying Menu Cart
document.addEventListener('DOMContentLoaded', () => {
toggler.addEventListener('click', toggleCart);
crossButton.addEventListener('click',closeCart);
function toggleCart(){
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
function closeCart(){
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
});
toggler is button that opens sidecart
cartWrapper is the sidecart
and crossButton the cross button that close the sidecart
Here is my sidecart:
If you want more information about my code i would appreciate it if you tell me, Thank you!
My html code:
<!-- Sidebar Cart-->
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<div class="container">
<div class="row">
<div class="col-md-6 mt-auto titleCart">
<h2 class="titleText">YOUR CART</h2>
</div>
<div class="col-md-2" style="left:30%">
<div class="crossIcon" id="closeCart">
<span class="iconify closeIcon" data-icon="zmdi:close"></span>
</div>
</div>
</div>
</div>
<ul class="sidebar-nav">
<li class="cart-item">
<div class="cart-item-img">
<img src="imgProducts/guitar1.jpg" alt="">
</div>
<div class="cart-item-txt">
<a class = "cart-item-name" href="#">Miyiagi Guitar</a>
<span class="cart-item-price-qty">
1 x 16.00
</span>
</div>
<button class="button deleteBtn"><i class="fa fa-trash-o" style="position:relative;font-size:24px; left:0;"></i></button>
</li>
</ul>
<div class="col-md-12" style="margin-top:4em;">
<hr class="dividerLineCart">
<div class="cart-total">
<h2 class="cartTotal">Total: $0.00</h2>
</div>
</div>
<div class="col-md-12 d-flex buttonsCartDiv">
View Cart
Check Out
</div>
</div>
</div>
My navbar that includes the button that toggle my sidecart:
<nav class="navbar fixed-top navbar-expand-md py-3 navbar-dark" style="background-color: rgba(41, 56, 61,0.65);font-family: Helvetica Neue,Helvetica,Arial,sans-serif;">
<a class="navbar-brand" href="index.php">
<img src="Images/charman logo white-trans.png" alt="Logo" style="height:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li><hr class="dropdown-divider"></li>
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.php">Shop</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="guitars.php" id="navbarDropdownMenuLink" role="button" aria-haspopup="true" aria-expanded="false">
Guitars
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="electrical-type.php">Electrical</a>
<a class="dropdown-item" href="acoustic-type.php">Acoustic</a>
<a class="dropdown-item" href="basses-type.php">Basses</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.php">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" id="has-divider" href="#" data-target="#modalRegister" data-toggle="modal">Sign Up
<span class ="glyphicon glyphicon-user" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="has-divider2" href="#" data-target="#modalLogin" data-toggle="modal">Login
<span class="glyphicon glyphicon-log-in" aria-hidden="true" style="float:left;padding-right:0.4em;"></span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="menu-toggle"><span id="cart-text">Cart</span>
<span class="glyphicon glyphicon-shopping-cart" style="transform: scaleX(-1)" aria-hidden="true"></span>
<span class="badge badge-notify">0</span>
</a>
</li>
</ul>
</div>
</nav>

Well you can just click EventListener to the elements opening outside the sideCart.... ! Btw one question here where you want to get clicked.... you just need to add click event listener outside of this cart thing.. and you are pretty much good to go... !

if (cartWrapper.hasClass("menuDisplayed")) {
$("body").on("click", function() {
closeCart();
});
cartWrapper.on("click", function(event) {
event.stopPropagation();
});
});

Hope this Code will help you.
<script>
let sidebar = document.getElementById('sidebar-wrapper');
let navbarTogglerButton = document.getElementById('toggler-button');
window.document.addEventListener('click', (e) => {
let clickedArea = e.path[e.path.length-6]
if ( clickedArea == sidebar || e.path[0] == navbarTogglerButton) {
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
else {
cartWrapper.classList.toggle('menuDisplayed');
cartWrapper.classList.toggle('menuDisplayedBgColor');
}
});
</script>

Adminlte 3 with bootstrap-4 dynamic sidebar menu loaded from ajax sidebar open not working

I want to draw dynamic sidebar menu data from database using AJAX in the adminlte 3 dashboard with bootstrap 4 dashboard. When I loaded sidebar menu data dynamically by using AJAX, sidebar open or collapse not working.My JSFiddle URL is given below. When static data push on '.sidebar' class without ajax, menu open/hide working. But using ajax call menu open/hide not working.
$(document).ready(function(){
var url = "";
$.ajax({
url: url,
}).done(function(resp){
//retrive data
var ret = '<nav class="mt-2"><ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true"><li class="nav-item"><i class="nav-icon fas fas fa-user"></i><p>Admin<i class="right fas fa-angle-left"></i></p><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Rahim</p></li></ul><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Test</p></li></ul></li></ul></nav>';
$('.sidebar').html(ret);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="sidebar-mini sidebar-closed sidebar-collapse" style="height: auto;">
<!-- Site wrapper -->
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-primary navbar-dark">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<!--
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
-->
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<img src="public/images/login_man.png" class="user-image img-circle elevation-2" alt="User Image">
<span class="d-none d-md-inline">admin</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<!-- Menu Footer-->
<li class="user-footer">
<!--Profile-->
Sign out
</li>
</ul>
</li>
<!--
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
-->
</ul>
</nav>
<!-- /.navbar --><aside class="main-sidebar main-sidebar-custom sidebar-dark-primary elevation-4">
<a href="#" class="brand-link">
<i class="brand-image fas fa-tachometer-alt" style="opacity: .8"></i>
<span class="brand-text font-weight-light">Dashboard</span>
</a>
<div class="sidebar">
</div>
</aside>
<div class="container-fluid">
<div class="content-wrapper" style="min-height: 549px;">
</div>
</div>
</div>
</body>

Just put the code after success function and it will work.
$('[data-widget="treeview"]').Treeview('init');

BOOTSTRAP: How do I get my current Nav bar to have a dropdown option?

The Template I used seems to no longer exist: https://startbootstrap.com/template-overviews/freelancer
Gif image of my current nav bar
I need help getting the word "Programs" to be a dropdown option within the current bootstrap code.
Services, About, and Contact href's just scroll to the anchors in the same page.
Any help would be greatly appreciated.
Here is my current code:
<!-- a copy of the custom js script -->
!function(t){"use strict";t('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var o=t(this.hash);if((o=o.length?o:t("[name="+this.hash.slice(1)+"]")).length)return t("html, body").animate({scrollTop:o.offset().top-71},1e3,"easeInOutExpo"),!1}}),t(document).scroll(function(){100<t(this).scrollTop()?t(".scroll-to-top").fadeIn():t(".scroll-to-top").fadeOut()}),t(".js-scroll-trigger").click(function(){t(".navbar-collapse").collapse("hide")}),t("body").scrollspy({target:"#mainNav",offset:80});function o(){100<t("#mainNav").offset().top?t("#mainNav").addClass("navbar-shrink"):t("#mainNav").removeClass("navbar-shrink")}o(),t(window).scroll(o),t(function(){t("body").on("input propertychange",".floating-label-form-group",function(o){t(this).toggleClass("floating-label-form-group-with-value",!!t(o.target).val())}).on("focus",".floating-label-form-group",function(){t(this).addClass("floating-label-form-group-with-focus")}).on("blur",".floating-label-form-group",function(){t(this).removeClass("floating-label-form-group-with-focus")})})}(jQuery);
<!-- Navigation -->
<nav class="navbar navbar-expand-lg bg-secondary text-uppercase fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Page Title</a>
<button class="navbar-toggler navbar-toggler-right text-uppercase font-weight-bold bg-primary text-white rounded" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger">Programs</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#portfolio">Services</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item mx-0 mx-lg-1">
<a class="nav-link py-3 px-0 px-lg-3 rounded js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- These are my references at the bottom of the page -->
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/freelancer.min.js"></script>

This is straight from the Bootstrap(v5.0) Documentation found here. I'd suggest finding out what version of bootstrap your template is using and seeing if the documentation is the same. If your template isn't terribly old I'd imagine its going to use v4.0 or later. structuring your HTML to something like this should be relatively straightforward and, more importantly, not break any of your existing styles.
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>

Menu having options in multiple columns on demand

I have been using CSS for multi-column view styles for mega menu. Right now the menu is showing the submenu items in multi-column but the issue I am facing is those submenu items get started in new column although there exists sufficient space in the earlier column.
i.e. For example, I have 31 submenu options and per column 12 submenu items can be listed. Hence it should display like 12 menu items in column 1, another 12 in column 2 and rest in column 3. But, due to some unknown reason. It shows only 10 sub menu items in columns 2 and rest in column 3.
You can review the same via image preview using the below link :
http://prntscr.com/oe22lu
We worked on to implement few CSS scripts to make the submenu items visible as we needed.
<div class="main-megamenu notmobile">
<ul class="navbar-nav">
<li class="nav-item dropdown" data-id="23">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/easy-servo-products" role="button">
<span class="category-name">EASY SERVO PRODUCTS</span>
</a>
<div class="catlevel-1">
<div class="dropdown-menu">
<div class="nav-items menu-options">
<div class="nav-item dropdown" data-id="24">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/easy-servo-motors" role="button">
<span class="category-name">Easy Servo Motors</span>
</a>
</div>
<div class="nav-item dropdown" data-id="40">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" aria-haspopup="true" aria-expanded="false" href="/2-phase" role="button">
<span class="category-name">2 Phase</span>
</a>
</div>
<div class="nav-item" data-id="42">
<a class="nav-link" href="/hybrid-stepper-motor-2">
<span class="category-name">Hybrid Stepper Motor</span>
</a>
</div>
</div>
<div class="nav-items menu-options-details">
<div class="submenu-details-wrapper" id="submenu-details-wrapper-24" style="min-height: auto;">
<div class="submenu-details" id="submenu-details-24">
<div class="nav-item dropdown catlevel-2" data-id="25">
<a class="nav-link dropdown-toggle" href="/low-vdc-input">
<span class="category-name">Low VDC Input</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-25">
<div class="nav-item" data-id="51">
<a class="nav-link" href="/2-phase-nema-14">
<span class="category-name">2 Phase NEMA 14</span>
</a>
</div>
<div class="nav-item" data-id="52">
<a class="nav-link" href="/2-phase-nema-16">
<span class="category-name">2 Phase NEMA 16</span>
</a>
</div>
<div class="nav-item" data-id="53">
<a class="nav-link" href="/vdc-or-transformer-input">
<span class="category-name">VDC or Transformer Input</span>
</a>
</div>
<div class="nav-item" data-id="54">
<a class="nav-link" href="/220230-vac-input">
<span class="category-name">220/230 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="61">
<a class="nav-link" href="/budge-stepper-drives">
<span class="category-name">Budge Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="62">
<a class="nav-link" href="/motor-extension-cables">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="27">
<a class="nav-link dropdown-toggle" href="/120-230-vac-input">
<span class="category-name">120 / 230 VAC Input</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-27">
<div class="nav-item" data-id="57">
<a class="nav-link" href="/digital-stepper-drives">
<span class="category-name">Digital Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="58">
<a class="nav-link" href="/classic-stepper-drives">
<span class="category-name">Classic Stepper Drives</span>
</a>
</div>
<div class="nav-item" data-id="59">
<a class="nav-link" href="/stepper-drive-modules">
<span class="category-name">Stepper Drive Modules</span>
</a>
</div>
<div class="nav-item" data-id="60">
<a class="nav-link" href="/servo-motors-2">
<span class="category-name">Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="47">
<a class="nav-link dropdown-toggle" href="/2-phase-2">
<span class="category-name">Easy Servo Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-47">
<div class="nav-item" data-id="1056">
<a class="nav-link" href="/brushless-servo-products">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1057">
<a class="nav-link" href="/brush-servo-products">
<span class="category-name">Brush Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1058">
<a class="nav-link" href="/unregulated-switching">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
<div class="nav-item" data-id="1059">
<a class="nav-link" href="/motor-extension-cables-2">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1060">
<a class="nav-link" href="/advanced-digital-stepper-drives-2">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="48">
<a class="nav-link dropdown-toggle" href="/3-phase">
<span class="category-name">Digital Stepper Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-48">
<div class="nav-item" data-id="1061">
<a class="nav-link" href="/110120-vac-input">
<span class="category-name">110/120 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="1062">
<a class="nav-link" href="/bldc-servo-motors">
<span class="category-name">BLDC Servo Motors</span>
</a>
</div>
<div class="nav-item" data-id="1074">
<a class="nav-link" href="/unregulated-switching-4">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="49">
<a class="nav-link dropdown-toggle" href="/5-phase">
<span class="category-name">High Torque Stepper Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-49">
<div class="nav-item" data-id="1063">
<a class="nav-link" href="/motor-extension-cables-3">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1064">
<a class="nav-link" href="/unregulated-switching-2">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="50">
<a class="nav-link dropdown-toggle" href="/09">
<span class="category-name">0.9</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-50">
<div class="nav-item" data-id="1065">
<a class="nav-link" href="/brush-servo-motors">
<span class="category-name">Brush Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="55">
<a class="nav-link dropdown-toggle" href="/advanced-digital-stepper-drives">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-55">
<div class="nav-item" data-id="1066">
<a class="nav-link" href="/classic-stepper-drives-2">
<span class="category-name">Classic Stepper Drives</span>
</a>
</div>
</div>
</div>
<div class="nav-item dropdown catlevel-2" data-id="56">
<a class="nav-link dropdown-toggle" href="/integrated-easy-servo-motors">
<span class="category-name">Integrated Easy Servo Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-56">
<div class="nav-item" data-id="1067">
<a class="nav-link" href="/stepper-drives-with-oscillators">
<span class="category-name">Stepper Drives with Oscillators</span>
</a>
</div>
</div>
</div>
</div>
<div class="submenu-image" id="submenu-image-24">
<img src="../images/thumbs/000/0000233_easy-servo-motors_370.png">
</div>
</div>
<div class="submenu-details-wrapper" id="submenu-details-wrapper-40" style="min-height: auto;">
<div class="submenu-details" id="submenu-details-40" style="min-height: 217px;">
<div class="nav-item dropdown catlevel-2" data-id="41">
<a class="nav-link dropdown-toggle" href="/geared-motors-2">
<span class="category-name">Geared Motors</span>
</a>
<div class="dropdown-menu-options catlevel-3" id="submenu-details-41">
<div class="nav-item" data-id="1072">
<a class="nav-link" href="/110120-vac-input-2">
<span class="category-name">110/120 VAC Input</span>
</a>
</div>
<div class="nav-item" data-id="1073">
<a class="nav-link" href="/motor-extension-cables-4">
<span class="category-name">Motor Extension Cables</span>
</a>
</div>
<div class="nav-item" data-id="1075">
<a class="nav-link" href="/brush-servo-motors-2">
<span class="category-name">Brush Servo Motors</span>
</a>
</div>
</div>
</div>
<div class="nav-item" data-id="1068">
<a class="nav-link" href="/brushless-servo-products-2">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1069">
<a class="nav-link" href="/brushless-servo-products-3">
<span class="category-name">Brushless Servo Products</span>
</a>
</div>
<div class="nav-item" data-id="1070">
<a class="nav-link" href="/unregulated-switching-3">
<span class="category-name">Unregulated Switching</span>
</a>
</div>
<div class="nav-item" data-id="1071">
<a class="nav-link" href="/advanced-digital-stepper-drives-3">
<span class="category-name">Advanced Digital Stepper Drives</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item" data-id="22">
<a class="nav-link" href="/others-2">
<span class="category-name">OTHERS</span>
</a>
</li>
<li class="mobile-menu-items"></li>
</ul>
I need to show sub-menu items in multi-column vertically, such that additional column is used only if sufficient menu items exist. You can review the same via the image preview - http://prntscr.com/oe28im