Off Canvas 3rd Level Padding - Question | JoomShaper

Off Canvas 3rd Level Padding

JK

Jeffrey Kiefer

Helix Framework 1 month ago

I have 3 levels in the off canvas menu. Level 1 &2 are fine. The 3rd level menu titles wrap (not a problem). I would like to put a space (padding) between 3rd level items so they appear more clear to the user than just a long block of menu links.. What css snippt can I use to acheve this? The issue is here: https://odd-fellows.org/programs -> programs landing page -> all the various scholorships and grant pages. Thanks!

0
2 Answers
Ziaul Kabir
Ziaul Kabir
Accepted Answer
Support Agent 1 month ago #221516

Hello Jeffrey,

Thank you for reaching out to us.

You can achieve this by adding a custom CSS rule specifically targeting the 3rd level menu items.

Please add the following code to your Custom CSS section in the Helix Ultimate template:

@media (max-width: 991px) {
    ul.mod-menu__sub.list-unstyled.small.menu-child 
    ul.mod-menu__sub.list-unstyled.small.menu-child li {
        padding: 6px 0;
    }
}

To add this: Go to Helix Ultimate → Template Options → Custom Code → Custom CSS and paste the code there.

This will create spacing between the 3rd level items, making them more readable in the off-canvas menu.

Let me know if you need further adjustments.

Thanks

0
JK
Jeffrey Kiefer
Accepted Answer
1 month ago #221586

Thank you

0