full page overlay menu columns

Thanks, Rikard — this is also for https://dtpc.wpenginepowered.com/ (pw in private content) — I have multiple tickets open for this; trying to find the best viable option — the full page overlay menu option in question here would be my first choice, if I could just break the nav into columns within that. Thanks!

Thanks, but the code you posted there (pasted below) actually seems to be for the solution in this thread, so I think continuing here makes more sense. This is the thread asking if it’s possible to break the overlay/burger menu into columns — the other thread is asking if the 3-column mega menu can span the full site width. The code below refers to the burger menu, so I guess continuing here makes more sense, no?

Your code seemed to target one level too deep — maybe because I hadn’t actually changed this nav to a burger menu, yet (it was still a regular/text nav, set as a mega menu with everything nested under a “menu” button). So I switched to the burger and removed the last ul in your 2nd rule. Then I added a float: left, to get the lis/columns to layout horizontally. But the 4th column was sort of tucking up under the 3rd, so I added a “break” class to the 4th menu item and added a rule to clear: left on that item.

That seems to get me close enough — I think now I can just play with the theme options/styling and refine the css to make everything look better (and of course disable these columns on the phone version, since three columns won’t work there) — so, thank you! Unless you have any other comments, feel free to close this thread.

Your code:

#av-burger-menu-ul li.menu-item-86 {
  display: flex;
  flex-wrap: wrap;
}
#av-burger-menu-ul li ul {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  width: 33%;
}

My version:

#av-burger-menu-ul li.menu-item-86 {
  display: flex;
  flex-wrap: wrap;
}
#av-burger-menu-ul li.av-width-submenu {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
  width: 33%;
  float: left;
}
#top #wrap_all #header #av-burger-menu-ul > li.break.av-active-burger-items {
    clear: left;
}

https://dtpc.wpenginepowered.com/