Aligning different height elements in mega menu in WordPress

Question

I am making a mega menu in WordPress that is giving me trouble. There should be four columns, and each column has a "heading" or top menu item. These headings have a gradient border on the bottom. The headings are also of different lenghts. The problem is that some of them span two lines and some don't. I can't for the life of me figure out how to get the wanted result.

The menu is generated by WordPress, so any change in HTML-code would have to go in a function or filter(?)

This is the current result (barebones code):

This is the wanted result:

nav {
  background: #4522FB;
  font-family: sans-serif;
}

.nav-mega-menu .menu-item-has-children a {
  font-size: 2.2rem;
  color: #fff;
}

.nav-mega-menu .menu-item-has-children>a:after {
  display: block;
  content: "";
  height: 0.5rem;
  width: 100%;
  background: linear-gradient(to right, #51E5FF, #0295FE);
}

.nav-mega-menu ul {
  max-width: 128.0rem;
  margin: 0 auto;
  overflow: hidden;
  padding: 5rem 0;
}

.nav-mega-menu .menu-item-has-children {
  display: block;
  width: 19%;
  float: left;
  padding: 0 2rem;
}

.nav-mega-menu .sub-menu a {
  font-size: 1.8rem;
  font-weight: 400;
  color: #51E5FF;
}

.mega-menu-bottom {
  clear: both;
  display: block;
}

<nav class="nav-mega-menu">
  <nav class="nav-mega-menu" role="navigation">
    <ul id="menu-mm-megamenu" class="menu">
      <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-9"><a href="#">TOP MENU ITEM LONG</a>
        <ul class="sub-menu">
          <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="#">SUB MENU ITEM</a></li>
        </ul>
      </li>
      <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-12"><a href="#">TOP ITEM</a>
        <ul class="sub-menu">
          <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">SUB MENU ITEM</a></li>
        </ul>
      </li>
      <li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-16"><a href="#">TOP MENU ITEM LONG</a>
        <ul class="sub-menu">
          <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="#">SUB MENU ITEM</a></li>
        </ul>
      </li>
      <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-21"><a href="#">TOP ITEM</a>
        <ul class="sub-menu">
          <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="#">SUB MENU ITEM</a></li>
          <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#">SUB MENU ITEM</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</nav>

Fiddle: https://jsfiddle.net/cja6oegd/3/

You can't. There is NO CSS mechanism to equalise heights of elements that do not share a parent. - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks — Paulie_D, Dec 02 '19 at 12:31

score 0 · Accepted Answer · answered Dec 04 '19 at 08:25

This was solved using jQuery:

var maxHeight = 0;
var orgHeight = 0;

$(".nav-mega-menu .menu-item-has-children > a").each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { 
      maxHeight = thisH;
   }
});

$(".nav-mega-menu .menu-item-has-children > a").each(function(){
   var orgHeight = $(this).height();
   if (orgHeight < maxHeight) {
      var paddingTop = maxHeight - orgHeight;
      $(this).css('padding-top', paddingTop);
   }
});

It loops through the items and gets the height of the largest item. Then it loops through them again and sets the padding-top of all items that have a smaller height to the maximum height minus its own height.

This aligns the items as wanted. Fiddle: https://jsfiddle.net/cja6oegd/7/

score 0 · Answer 2 · answered Dec 04 '19 at 09:57

/* use flex this is the most easiest way to fix height and width issue */

.nav-mega-menu ul {
    display: flex;
    flex-wrap: wrap;
}
/* equally divide divs */
.nav-mega-menu .menu-item-has-children{
  flex:1;
}
.nav-mega-menu .menu-item-has-children > a:after{
  margin-top:10px;
}
.nav-mega-menu .menu-item-has-children a{
  text-decoration:none;
}
.nav-mega-menu .sub-menu a {
    padding: 15px 0px;
    display: block;
}

Aligning different height elements in mega menu in WordPress

2 Answers2