2

I have a few items for a megamenu that are display:flex; and I have adapted the lists inside each flexed div to be flex column.

Problem is that sometimes the lists will have too many items, and I need them to start again in the same line.

Example on codepen: https://codepen.io/james_zedd/pen/KRyQao

I have modified the height of the first ul to be 100px as an example. The container div has not adapted to the new width of the ul.

What am I doing wrong here?

/* -- Mega MEnu -- */

.megamenu {
  display: flex;
  background-color: #f5f5f5;
  opacity: 0;
  visibility: hidden;
  max-height: 430px;
}

.megamenu.first {
  opacity: 1;
  visibility: visible;
}

.megamenu__linklist {
  padding: 30px 0 26px 40px;
}

.megamenu__linklist h4 {
  margin-top: 0;
  margin-bottom: 12px;
}

.megamenu__linklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.megamenu__linklist a:hover {
  color: red;
}
<div id="mm01" class="megamenu first">

  <div class="megamenu__img">
    <img src="//cdn.shopify.com/s/files/1/0023/6516/1525/files/mm_01_330x430.jpg?v=1525703183" alt="Custom Printing Tshirts">
  </div>



  <div class="megamenu__linklist">

    <h4>T-Shirts and Clothing</h4>
    <ul class="mm_links" style="height:100px">

      <li><a href="/collections/t-shirts" class="f-class-01 light">T-Shirts</a></li>

      <li><a href="/collections/hoodies-sweatshirts" class="f-class-01 light">Hoodies/Sweatshirts</a></li>

      <li><a href="/collections/performance" class="f-class-01 light">Performance</a></li>

      <li><a href="/collections/golf-shirts-polos" class="f-class-01 light">Golf Shirts/Polos</a></li>

      <li><a href="/collections/woven-shirts" class="f-class-01 light">Woven Shirts</a></li>

      <li><a href="/collections/hats-and-toques" class="f-class-01 light">Hats and Toques</a></li>

      <li><a href="/collections/outerwear" class="f-class-01 light">Outerwear</a></li>

      <li><a href="/collections/pants-shorts" class="f-class-01 light">Pants/Shorts</a></li>

      <li><a href="/collections/ladies" class="f-class-01 light">Ladies</a></li>

      <li><a href="/collections/youth" class="f-class-01 light">Youth</a></li>

      <li><a href="/collections/infants-youth" class="f-class-01 light">Infants/Toddlers</a></li>

    </ul>
  </div>



  <div class="megamenu__linklist">

    <h4>Sports and Teams</h4>
    <ul class="mm_links">

      <li><a href="#" class="f-class-01 light">Hockey</a></li>

      <li><a href="#" class="f-class-01 light">Soccer</a></li>

      <li><a href="#" class="f-class-01 light">Basketball</a></li>

      <li><a href="#" class="f-class-01 light">Baseball</a></li>

      <li><a href="#" class="f-class-01 light">Football</a></li>

      <li><a href="#" class="f-class-01 light">Lacrosse</a></li>

      <li><a href="#" class="f-class-01 light">Volleyball</a></li>

      <li><a href="#" class="f-class-01 light">Track and Field</a></li>

      <li><a href="#" class="f-class-01 light">Rugby</a></li>

      <li><a href="#" class="f-class-01 light">Cycling</a></li>

    </ul>
  </div>



  <div class="megamenu__linklist">

    <h4>Signs and Displays</h4>
    <ul class="mm_links">

      <li><a href="#" class="f-class-01 light">Adhesive Decals</a></li>

      <li><a href="#" class="f-class-01 light">Backdrops</a></li>

      <li><a href="#" class="f-class-01 light">Banners</a></li>

      <li><a href="#" class="f-class-01 light">Signs</a></li>

    </ul>
  </div>



  <div class="megamenu__linklist">

    <h4>PRINTD</h4>
    <ul class="mm_links">

      <li><a href="#" class="f-class-01 light">About</a></li>

      <li><a href="#" class="f-class-01 light">FAQ</a></li>

      <li><a href="#" class="f-class-01 light">Contact Us</a></li>

      <li><a href="#" class="f-class-01 light">Privacy Policy</a></li>

      <li><a href="#" class="f-class-01 light">Terms and Conditions</a></li>

    </ul>
  </div>


</div>
AmigaAbattoir
  • 632
  • 8
  • 21
user4889134
  • 111
  • 2
  • 16

1 Answers1

0

I've noticed that sometimes, flexbox columns inside of flexbox rows (or vice versa) don't do the rendering math in the order I expect. That seems to be happening here, too.

Consider using flex-direction:row instead of column for the sub-elements, and give them a specific width or flex-basis. Something like this appears to solve your problem:

.megamenu .megamenu__img+.megamenu__linklist ul {
  /* height: auto; */
  flex-direction: row;
}
.megamenu .megamenu__img+.megamenu__linklist ul li {
  flex: 0 0 33.33%;
}

https://codepen.io/mblase75/pen/MGOVoW

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • Hi Martin. Thanks for your help - much appreciated. I don't think this is going to work though for what I need. All the best! – user4889134 May 07 '18 at 16:15
  • I found this works best for what I was hoping to achieve. https://stackoverflow.com/questions/23408539/how-can-i-make-a-displayflex-container-expand-horizontally-with-its-wrapped-con/26231447#26231447 – user4889134 May 07 '18 at 16:41