CMS Development

SGriffinKatzcy
Participant | Gold Partner
Participant | Gold Partner

Gap between footer menu items

SOLVE

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:

Home.png

 

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.

0 Upvotes
1 Accepted solution
piersg
Solution
Key Advisor

Gap between footer menu items

SOLVE

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

piersg_0-1614180054736.png

 

View solution in original post

3 Replies 3
piersg
Solution
Key Advisor

Gap between footer menu items

SOLVE

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

piersg_0-1614180054736.png

 

piersg
Key Advisor

Gap between footer menu items

SOLVE

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?

SGriffinKatzcy
Participant | Gold Partner
Participant | Gold Partner

Gap between footer menu items

SOLVE

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!