How to split the drop down menus WordPress walker on columns? - php

Question

How to split the drop down menus WordPress walker on columns?
How to split the drop-down menus into columns using WP-Bootstrap-Navwalker? as here:dropdown-menu with 3 columns
<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>
<!-- Navigation-->
<nav id="mainmenu" class="navbar navbar-expand-md navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="mainNavbar">
<ul class="navbar-nav nav-pills ">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link " href="page/company.html">page1</a>
</li>
<li class="nav-item dropdown has-megamenu">
Page2
<div class="container-fluid dropdown-menu submenu1 multi-column columns-3 ">
<div class="row">
<div class=" col-md-6 col-lg-4 ">
<ul class="multi-column-dropdown">
<li>
<h4><a class="dropdown-caption" href="page/repairs.html">Header Link</a></h4>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li><a class="dropdown-item" href="page/repairs_hydrocylindrs.html">Link</a></li>
<li><a class="dropdown-item" href="page/hydromotors.html">Link</a></li>
<li><a class="dropdown-item" href="page/piston-pumps.html">Link</a></li>
<li><a class="dropdown-item" href="page/hydraulic-distributor.html">Link</a></li>
<li><a class="dropdown-item" href="page/hydro_rotators.html">Link</a></li>
<li><a class="dropdown-item" href="page/dosing_pumps.html">Link</a></li>
<li><a class="dropdown-item" href="page/hydraulic-molot.html">Link</a></li>
</ul>
</div>
<div class=" col-md-6 col-lg-4 ">
<ul class="multi-column-dropdown">
<li>
<h4><a class="dropdown-caption" href="page/diagnostics.html">Header2 Link</a></h4>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li><a class="dropdown-item" href="page/diagnostics2.html"> Link</a></li>
<li><a class="dropdown-item" href="page/test_stend.html"> Link</a></li>
</ul>
</div>
<div class="col-md-6 col-lg-4">
<ul class="multi-column-dropdown">
<li>
<h4><a class="dropdown-caption" href="page/diagnostics.html">Header Link</a></h4>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li><a class="dropdown-item" href="page/stend.html">Link</a></li>
<li><a class="dropdown-item" href="page/pneumatic.html">Link</a></li>
<li><a class="dropdown-item" href="page/turning_works.html">Link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown has-megamenu">
Page3
<div class="container-fluid dropdown-menu submenu2 multi-column columns-3 ">
<div class="row">
<div class=" col-md-4">
<ul class="multi-column-dropdown">
<li>
<h4><a class="dropdown-caption" href="page/sale.html"> Header Link</a></h4>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li><a class="dropdown-item" href="page/stocks_trumpets.html"> Link</a></li>
<li><a class="dropdown-item" href="page/rod.html"> Link</a></li>
</ul>
</div>
<div class=" col-md-4">
<ul class="multi-column-dropdown">
<li>
<h4> <a class="dropdown-caption" href="page/sale.html">Header Link</a></h4>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li><a class="dropdown-item" href="page/making_cylinders.html"> Link</a></li>
<li><a class="dropdown-item" href="page/rvd.html">Link</a></li>
</ul>
</div>
<div class=" col-md-4">
<ul class="multi-column-dropdown">
<li>
<h4> <a class="dropdown-caption" href="page/sale.html">Header Link</a></h4>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li><a class="dropdown-item" href="page/new_hydro.html">Header Link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="page/contact.html">Page4</a>
</li>
</ul>
</div>
</nav>
<!-- End navigation-->
<!-- Navigation WordPress-->
<nav id="mainmenu" class="navbar navbar-expand-md navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2, // 1 = with dropdowns, 0 = no dropdowns.
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker()
) );
?>
</nav>
<!-- Navigation-->
Standard menu WP-Bootstrap-Nav Walker.
How to split the drop-down menus into columns using WP-Bootstrap-Navwalker?
I would like to see the options without using different plug-ins for WP

Answer 1

Navwalker dropdown can be split into a specified number of columns using CSS column-count.
Example (target the ul list):
.elementy-ul {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 100px;
width: 100%;
}
Helpful? Read more on CSS column count