Hello Mike,

Thanks for reaching out to us. While we don’t provide customizations, I can guide you on how to achieve this. Since your menu has many items, you can make it responsive using media queries. You’ll need to adjust the padding, margin, and font size to ensure it adapts well to different screen sizes.

For mobile and tablet views, it’s better to use an off-canvas menu for a cleaner and more user-friendly experience, as too many items can clutter the screen.

For example:

@media (max-width: 1366px) {
    .nav li {
        padding: 0 10px; /* Reduce padding on smaller screens */
    }
}

@media (max-width: 1280px) {
     .nav li {
        padding: 0 6px; /* Reduce padding on smaller screens */
    }
             .nav li a{
        font-size: 14px; /* Reduce padding on smaller screens */
    }
}

Let me know if you need further guidance!

Thanks

Hi Mike.

Try this

@media (max-width: 1399.98px) and (min-width: 992px) {
    .sp-megamenu-parent>li>a,
    .sp-megamenu-parent>li>span {
        font-size: calc(.2rem + 1.1vw);
        padding: 0 0.9em !important;
    }
}

Ill give these options a try. Thanks for the help.