devadinesh devadinesh - 2 months ago 26
jQuery Question

bootstrap large dropdown menu different width size

I have used bootstrap large menu the Dropdown menu don't display same width it's different from each menu. How can I solve this issues the are given below.



.dropdown-header {
font-size: 18px;
}

.dropdown-large {
position: static !important;
}

.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}

.dropdown-menu-large>li>ul {
padding: 0;
margin: 0;
}

.dropdown-menu-large>li>ul>li {
list-style: none;
}

.dropdown-menu-large>li>ul>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}

.dropdown-menu-large>li ul>li>a:hover,
.dropdown-menu-large>li ul>li>a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}

.dropdown-menu-large .disabled>a,
.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
color: #999999;
}

.dropdown-menu-large .disabled>a:hover,
.dropdown-menu-large .disabled>a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
cursor: not-allowed;
}

.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}

@media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0;
margin-right: 0;
}
.dropdown-menu-large>li {
margin-bottom: 30px;
}
.dropdown-menu-large>li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}

.dropdown-menu {
min-width: 200px;
}

.dropdown-menu.columns-2 {
min-width: 400px;
}

.dropdown-menu.columns-3 {
min-width: 600px;
}

.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}

.multi-column-dropdown {
list-style: none;
margin: 0px;
padding: 0px;
}

.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
border-left: 1px solid gray;
}

.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
}

@media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="main-header">
<nav class="navbar navbar-default navbar-custom" role="navigation">
<div class="container">
<div class="mobile navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand logo" href="index.html"><img src="img/logo.png" alt="cablenet"></a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.php">Home<span></span></a></li>

<li><a href="about.php">About Us<span></span></a></li>
<li class="dropdown dropdown-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cabling<span></span> <b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">We do provide below services:</li>
<li class="divider"></li>
<li><a href="services.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Structured Cabling</a></li>
<li><a href="TelephoneCabling.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Telephone Cabling</a></li>
<li><a href="CopperCabling.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Copper Cabling – Cat 5, Cat 6 and Cat 7</a></li>
<li><a href="FiberOpticCabling.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Cabling – Single Mode and Multi-Mode</a></li>
<li><a href="CableSupport.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Cable Support / Tray Systems installation</a></li>
<li><a href="CableManagement.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Cable Management</a></li>
<li><a href="AudioCables.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Audio & Video Cables</a></li>
<li><a href="TelecomCable.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Voice / Telecom Cable</a></li>
<li><a href="ElectricalCable.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Electrical Cable</a></li>
</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><a href="NetworkSwitches.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Network Switches</a></li>
<li><a href="24Port.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> 24 Port Patch Panel Loaded with Modular Jacks - Cat3, Cat5e, Cat6</a></li>
<li><a href="UTPCables.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> UTP Cables - Cat3, Cat5e, Cat6 ,Cat 7</a></li>
<li><a href="UTPPatchCords.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> UTP Patch Cords - Cat3, Cat5e, Cat6 ,Cat 7</a></li>

</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><a href="24PortPatch.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> 1U /2 U Horizontal Cable Management Strip</a></li>
<li><a href="FiberOpticCable.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Cable - Indoor, Outdoor, Armoured, Multimode, Singlemode, 2, 4, 6, 12, 24 core</a></li>
<li><a href="TerminationBlocks.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Termination Blocks for Telephone Lines - 110 Block, Krone Block</a></li>

</ul>
</div>
<div class="col-sm-3">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><a href="FiberOpticPatchPanel.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Fiber Optic Patch Panel - rack mount, wall mount, 6, 12, 24, 48 port c/w SC, ST, FC, LC adapters, Multimode, Singlemode</a></li>
<li><a href="MediaConverter.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Media Converter - Multimode, Singlemode</a></li>
<li><a href="19NetworkRack.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> 19" Network Rack - 6U, 12U, 42U, wall mount, standing, customized</a></li>
</ul>
</div>
</div>
</ul>
</li>

<li class="dropdown dropdown-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Electrical<span></span><b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><a href="Light.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do sales and Supply varies Electrical products like Lights, FAN and Electrical Cable</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
<li><a href="Light.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do design and install electrical cabling system with safety in place.</a> </li>
<li><a href="Light.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do install various electrical products like Lights , Fan and other electrical appliances.</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">CCTV Surveillance System<span></span><b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><a><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do sales and Supply Various CCTV system as below:</a></li>
<li><a href="Cameras.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> IP camera with 8 Channel DVR / 16 Channel DVR/ 32 Channel DVR</a></li>
<li><a href="Cameras.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Analog camera 8 Channel DVR / 16 Channel DVR/ 32 Channel DVR</a></li>
<li><a href="Cameras.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> IP camera with 8 Channel NVR / 16 Channel NVR/ 32 Channel NVR</a></li>
<li><a href="Cameras.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Various Hidden camera to secured environments</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
<li><a><i class="fa fa-hand-o-right" aria-hidden="true"></i> We do design, Install and Support services for various CCTV system to have better secured environments to protect your workplace to enhance the work productivity and to have the piece of minds .</li>
</a>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown dropdown-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">DAS<span></span><b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Services</li>
<li class="divider"></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li class="dropdown-header">Products</li>
<li class="divider"></li>
<li><a href="DAS.php"><i class="fa fa-hand-o-right" aria-hidden="true"></i> Door Access System</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
</nav>
</div>
<!-- Main Header End -->
</header>





check the DAS menu and CCTV menu width size
both are not same width
it's possible to change the same width size for all drop down menus
am using row for each menu

Answer Source
.dropdown-menu:100%;

use the code above i think maybe solve the problem