Bootstrap 4 menu-dropdown and sub-menu-dropdown to have same height

Question

I'm using Bootstrap 4 and trying to get menu-dropdown and sub-menu-dropdown to have equal heights.

So far, I manage to get menu-dropdown height to be equal to sub-menu-dropdown and not the other way around using jQuery. How do I manage to make it look like this as shown below:

JSFiddle: https://jsfiddle.net/g9thp3j5/

HTML:

<div id="main-nav" class="justify-content-end">
  <ul id="menu-main-menu" class="navbar-nav">
    <li class="menu-item current-menu-item current_page_item menu-item-home active nav-item"><a href="#" class="nav-link">Main Menu 1</a>
    </li>
    <li class="menu-item menu-item-has-children dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link">Main Menu 2</a>
      <ul class="dropdown-menu" role="menu">
        <li class="menu-item menu-item-has-children dropdown nav-item"><a href="#" class="dropdown-item">Menu 1</a>
          <ul class="dropdown-menu" role="menu">
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 1</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 2</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 3</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 4</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 5</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 6</a></li>
          </ul>
        </li>
        <li class="menu-item menu-item-has-children dropdown nav-item"><a href="#" class="dropdown-item">Menu 2</a>
          <ul class="dropdown-menu" role="menu">
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 11</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 12</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 13</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 14</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 15</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 16</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 17</a></li>
          </ul>
        </li>
        <li class="menu-item nav-item"><a href="#" class="dropdown-item">Menu 3</a>
        </li>
      </ul>
    </li>
    <li class="menu-item nav-item"><a href="#" class="nav-link">Main Menu 3</a></li>
    <li class="menu-item nav-item"><a href="#" class="nav-link">Main Menu 4</a></li>
  </ul>
</div>

CSS:

.navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
}
.navbar-nav .dropdown-menu {
    position: absolute;
}
.navbar-nav > li {
  margin: 0 15px;
}
.dropdown-menu .dropdown-toggle::after {
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
  border-top: 0.3em solid transparent;
}
.dropdown-menu.show {
  border: 1px solid #999;
  background-color: #ffffff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
    position: relative;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.11);
    background-color: #ffffff;
    border: 1px solid #999;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>.dropdown-menu {
    display: block;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>a:after {
    border-left-color: #fff;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left {
    float: none;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

JS:

$("#main-nav > ul > li").each(function(){
  var maxHeight = 0;
  var myUl=$("ul", $(this));

  myUl.each(function(){
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
  });

  myUl.height(maxHeight);
});

I was working on an answer to your question, but I'm curious. Why are you circumventing bootstrap's "tried and true" method of displaying these nested select list? It seems like you're spending a lot of time reinventing the wheel, and you're going to have to spend a lot more time to get it even close to being "as fluid" as bootstrap is straight out of the box. — Jay Jordan, Oct 20 '19 at 12:35
What do you suggest? I'm using Bootstrap 4 (own custom template) in Wordpress and the menu is auto generated. I can't change the design of the template. I'm just a coder. — Elaine Byene, Oct 20 '19 at 12:43
Lol, almost done, but I found a better example when I had a quick question myself. https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click. I did just notice however that in this example the "hamburger" menu isn't working and thus not reactive. I would suggest not overriding bootstraps functionality. I know the hover seems nice, but it's annoying to use, annoying to setup, and it's not compliant W3C https://www.w3.org/standards/webdesign/accessibility. — Jay Jordan, Oct 20 '19 at 13:27
The example link you shared has a menu-dropdown but I want the menu-dropdown and the sub-menu-dropdown to have the `same height` as shown in the screenshot attached in my original post. I don't think my issue can be resolved using CSS. Hence, I tried using jQuery. — Elaine Byene, Oct 20 '19 at 13:35
No, I understand. I'm just questioning your motives. I'm sure there is a great reason you need those to be the same height. I'm just asking for the damage you're doing to the user experience that bootstrap has worked hard to perfect, all the extra work your doing trying to make it happen, and the end result being that your product isn't as good as it would have been had you done it using the conventions that bootstrap set forth. Is it worth it? What's the ROI? I'm sorry to play devil's advocate, but at this point I'm asking my self "Why solve this problem?". — Jay Jordan, Oct 20 '19 at 13:45
The designer made it and the client approved it. There's no other motive here. — Elaine Byene, Oct 20 '19 at 13:46
Yeah. I'm trying from my end as well but couldn't figure how to check the height in the `sub-menu-dropdown` and replicate that height in the menu-dropdown. — Elaine Byene, Oct 20 '19 at 13:52

Bootstrap 4 menu-dropdown and sub-menu-dropdown to have same height

0 Answers0