Gap between footer menu items

Developer Support CMS Development
1

We want to have the Company primary menu item closer to the bottom of the Partners menu list so there isn’t a large gap:

38498iDFD431B8E63A7FC7.png
38498iDFD431B8E63A7FC7.png400×230 40.9 KB

Is there a setting to remove that gap? I can’t find that anywhere. If not, what CSS could be added to override that spacing? Thank you.

2

Hi @SGriffinKatzcy, can you provide a link to the page or a preview link so we can inspect the CSS directly and we can provide specific solutions please?

3

Hi @piersg. Thanks for your reply and sorry for not including the link in my original post. The site is at https://cylera-7852770.hs-sites.com/

If you are able to take a look, it would be greatly appreciated. Thanks!

4

I think the only real way of doing this is to use the columns and break-after properties without flexbox. You’ll need to switch “platform” and “partners” as they’re being ordered in a column instead of a row. I’ve commented out the styles that need to be removed

.footer .section_right ul {
 /* flex-wrap: wrap; */
 /* align-items: flex-start; */
 /* justify-content: space-between; */
 columns: 2;
}
.hs-menu-wrapper ul {
 /* display: flex; */
 /* flex-wrap: wrap; */
 list-style: none;
 margin: 0;
 padding-left: 0;
}
.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
 columns: auto;
}
.footer .section_right li.hs-menu-item.hs-menu-depth-1 {
 /* width: 40%; */
 padding-bottom: 20px;
}
li.hs-menu-item.hs-menu-depth-1:nth-child(2n) {
 break-after: column;
}

Looks like this

38583i4970D8C0564C89E2.png
38583i4970D8C0564C89E2.png400×277 48.8 KB