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 .


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.

Was this article helpful?
Dislike 0
Views: 264

Join the conversation