To add these css classes, you must paste them into the CSS classes box eg: https://d.pr/i/0Y2wfZ . If this field is not shown, make sure to make it visible by clicking on the top Screen Options and check Title & CSS Classes eg: https://d.pr/i/gfkXgC .
Adding a separator between items
Use class --separated . The outcome should be https://d.pr/i/3Sg9CD .
Adding colored text badges
Use any of these classes, depending on the color you want. Make sure to add a Title in the title field eg: https://d.pr/i/79iV0O . The result should be something like https://d.pr/i/TXNtht .
--badge-green --badge-red --badge-orange --badge-blue --badge-accent
Highlight item (red color)
Use class --highlight . Should result in https://d.pr/i/yBSS6G .
Bold item
Use class --bold . Should result in https://d.pr/i/Ne5ule .
Mega menu panel – reset padding
To reset add the class --mega-gs-no-padding .
All mega menu panels have a surrounding padding which causes a white border if you customize the background color of the section elements in the Mega Menu Global Sections content. The padding is used as an entrance effect so resetting it will lose the effect.
Show menu item only on mobiles
To show a menu item only on mobiles, use the class --mobile-only . You can also use --desktop-only , however the cases can be rare.