Menu with two columns has turned into one

Developer Support CMS Development
1

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:

456×298 17.2 KB

But now it looks like this:

menu - mess add on.PNG
menu - mess add on.PNG316×653 42.6 KB

Many thanks,

Jamila

2

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:disappointed_face:

GroupcallMenu.jpg
GroupcallMenu.jpg2736×1522 689 KB

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