Menu with two columns has turned into one

[Jlawal]

Hi all,

There has been a change made to the menu and it is displaying differently, but i'm not sure how it came about. Any advice on how to fix it would be greatly appreciated.

Our menu used to look like this:

But now it looks like this: 

Many thanks,

Jamila 

[Stephanie-OG · Accepted solution]

Hi Jamila!

The issue seems to be with this snippet of code: 

.custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
    background-color: #C4191A;
    border-top: 1px solid #000;
    flex-wrap: wrap;
}

When you remove the

flex-wrap: wrap;

it stops the menu from wrapping around (see example here😞 

 Groupcall Menu

 To find this file, go to your Design Manager and find the adido-style-new.css file. Use Ctrl + F to search for that line. Rather than removing it altogether, perhaps comment it out with an explanation if you're unsure, like this: 

.custom-menu-primary .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
    background-color: #C4191A;
    border-top: 1px solid #000;
    /* flex-wrap: wrap; - Fixing issue with menus stacking */
}

I hope that helps!

---

Stephanie O'Gay Garcia
HubSpot Design / Development / Automation
Website | Contact