Styling Custom Menus in mega menu submenu widgets

is this any closer? i’m like a spaghetti factory

#mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item {
      border-bottom: 1px dashed #777;
      padding-bottom: 2px;
}

Hi suzyoo,

Please insert the following into the Custom Styling area of the menu theme:

#{$wrap} #{$menu} > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item ul.menu li {   

    .dropdown-toggle {
        display: none;
    }             

    /* Second level menu item */
    > a {
        color: $panel_second_level_font_color;
        font-family: $panel_second_level_font;
        font-size: $panel_second_level_font_size;
        text-transform: $panel_second_level_text_transform;
        text-decoration: $panel_second_level_text_decoration;
        font-weight: $panel_second_level_font_weight;
        margin: $panel_second_level_margin_top $panel_second_level_margin_right $panel_second_level_margin_bottom $panel_second_level_margin_left;
        padding: $panel_second_level_padding_top $panel_second_level_padding_right $panel_second_level_padding_bottom $panel_second_level_padding_left;
        vertical-align: top;
        display: block;
        border-top: $panel_second_level_border_top solid $panel_second_level_border_color;
        border-left: $panel_second_level_border_left solid $panel_second_level_border_color;
        border-right: $panel_second_level_border_right solid $panel_second_level_border_color;
        border-bottom: $panel_second_level_border_bottom solid $panel_second_level_border_color;
    }

    /* Second level menu item hover */
    > a:hover,
    > a:focus {
        color: $panel_second_level_font_color_hover;
        font-weight: $panel_second_level_font_weight_hover;
        text-decoration: $panel_second_level_text_decoration_hover;
        @include background($panel_second_level_background_hover_from, $panel_second_level_background_hover_to);
    }

    /* Third level menu item */
    ul.sub-menu li > a {
        color: $panel_third_level_font_color;
        font-family: $panel_third_level_font;
        font-size: $panel_third_level_font_size;
        text-transform: $panel_third_level_text_transform;
        text-decoration: $panel_third_level_text_decoration;
        font-weight: $panel_third_level_font_weight;
        margin: 0;
        padding: $panel_third_level_padding_top $panel_third_level_padding_right $panel_third_level_padding_bottom $panel_third_level_padding_left;
        vertical-align: top;
        display: block;
    }

    /* Third level menu item hover */
    ul.sub-menu li > a:hover,
    ul.sub-menu li > a:focus {
        color: $panel_third_level_font_color_hover;
        font-weight: $panel_third_level_font_weight_hover;
        text-decoration: $panel_third_level_text_decoration_hover;
        @include background($panel_third_level_background_hover_from, $panel_third_level_background_hover_to);
    }
}

The styles for the custom menu widget will be picked up from the theme option (Second and Third level menu items).

Regards,
Tom

Tom! Thank you so, so much! I have tried WooRockets and UberMenu mega menus, and at least one other, though I can’t remember the name. Yours is the best, BY FAR. Thanks again!

Hi Suzy,

You’re welcome ??

If you have a spare minute please could you leave a review for the plugin?

Thanks
Tom