Currently you can add a badge to a dropdown items (e.g. the dropdown in Creative Demo), add the shortcode below to the dropdown items of your menu in the Navigation Label field (WordPress Panel > Appearance > Menus)
[pix_badge text="Main Demo" bold="font-weight-bold" text_size="custom" text_custom_size="12px" text_color="primary" bg_color="primary-light"][/pix_badge]Where:
- text=”” (The text to display inside the badge)
- bold=”font-weight-bold” (to make the font bold, remove to display normal font)
- text_size=”custom” (for example: H1, H2, …, H6 or “custom” to input custom size via “text_custom_size” argument)
- text_custom_size=”12px” (the custom font size value if text_size=”custom”)
- text_color=”primary” (one of the theme colors, check this article about theme colors, or this article about theme classes), for example:
text_color="primary" The result
text_color="secondary" The result
text_color="black" The result
text_color="gray-5" The result
- bg_color=”primary-light” (one of the theme colors, check this article about theme colors, or this article about theme classes), for example:
bg_color="primary-light" The result
bg_color="secondary-light" The result
bg_color="white" The result
bg_color="gray-2" The result
→ Please note that currently it’s only possible to add a badge to a dropdown items (and not for main menu items), we’re going to add more customization options in the future update.
Note: If you want to display the Badge element on the right of the menu item (Right float) you can add the following code snippet into Theme options > Layout > Advanced > Custom css:
.menu-item .d-inline-block.mr-1 {
float: right;
}For more information on the theme colors you can check this article from our knowledge base:
