Header Navigation – CSS preset classes

You are here:
Estimated reading time: 1 min

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.

Was this article helpful?
Dislike 0
Views: 18

Join the conversation