Helpful Links: Advanced Navigation Menus and Settings for Theme Styles
Menu Tags are set up in two steps. First, the menu tag has to be defined (what it looks like); then the menu tag has to be placed (where the tag should show).
Menu Tag Styles for POWER Theme
Theme Settings → Styling → Menu Tags
Four Menu Tags and a Pulsing Dot can be configured in the Theme Settings, which will then be applied to any menu item you have added the corresponding CSS class to.
Within the theme settings, you can choose the text and background color for each menu tag as well as the color for the dot (pulsing circle). The text is controlled in the menu settings as outlined below.
Add Menu Tags to Your HubSpot Navigation
Settings → Website → Navigation
If you haven't already created your navigation menu, refer to the full instructions for setting up navigation menus.
Once you have the menu structure established and have identified the menu items you would like to tag, you'll need to copy the corresponding code to add to your menu.
Each style that you set up in the Theme Settings has a corresponding tag that you can use.
Code for Menu Tags
To add a menu tag to your navigation, you will need to use a span class like this:
You can change the text between the span tags, in this example, "NEW", to be whatever you'd like it to be.
The first Menu Tag class is pwr-menu-tag--01, and then for the rest, you just change the number from 01 to 02, 03, 04.
The Menu Tags can be added before your menu link text or after your menu text link. If you are adding within a child menu, we recommend adding at the end to keep your links aligned properly.
Code for Menu Dot
To add a menu dot to your navigation, you will need to use a span class like this:
The text between the tags needs to be your menu link text, the span tags should wrap the text. In this example, "Your Menu Text Here" is the menu link that you would replace with your menu item.
The Menu Dot is automatically positioned in the upper left of the menu text.