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 .

LinkAdding a separator between items

Use class --separated . The outcome should be https://d.pr/i/3Sg9CD .

LinkAdding 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

LinkHighlight item (red color)

Use class --highlight . Should result in https://d.pr/i/yBSS6G .

LinkBold item

Use class --bold . Should result in https://d.pr/i/Ne5ule .

LinkMega 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.

LinkShow 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: 1394

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!