I wanted to add a “|” character in-between elements but the only option in Max Mega Menu (MMM) is to enable a divider or not but not specify a custom divider – it only uses the border-right/left settings.
Their support suggested this but stated it could cause icon alignment issues – under custom CSS in MMM:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@include desktop { #{$wrap} #{$menu} > li.mega-menu-item:first-child::before { content: ""; display: none; } #{$wrap} #{$menu} > li.mega-menu-item::before { content: "|"; color: #fff; display: inline; float: left; } } |
I ended up using a javascript hack to get it done:
|
1 2 3 4 5 6 |
jQuery(document).ready(function(){ var theSpan=`<span class="whiteDivider">|</span>`; jQuery("#mega-menu-max_mega_menu_3 #mega-menu-item-166").append(theSpan); jQuery("#mega-menu-max_mega_menu_3 #mega-menu-item-150").append(theSpan); jQuery("#mega-menu-max_mega_menu_3 #mega-menu-item-154").prepend(theSpan); }); |