Off Canvas 3rd level padding - Forum | JoomShaper
Solved Helix Framework

Off Canvas 3rd level padding

Asked by Jeffrey Kiefer 6 months ago Last activity 6 months 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!

Accepted answer

Marked as the solution
Ziaul Kabir Staff
6 months ago

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

Jeffrey Kiefer Asked this
6 months ago

Thank you

Log in to reply.