Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V35 released on December 21st 2023 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-mm_faq-2
FAQs

Have questions?
Search for answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / CHAT BOT

Menu Tags and Pulsing Dot

How to set up menu tags and add a pulsing dot to highlight menu links

pwr-icon_maka-tags

MENU TAGS

Add a menu tag to draw attention to a specific link in your website navigation.

tag-menu-links-pulsating-circle

Page Speed Impact

LOW

Menu tags have little to no impact on page speed.

MEDIUM

Menu Tags add a minimal amount of code to your navigation, if you were to go overboard and tag hundreds of items it might have an impact on your page speed, but you shouldn't do this for other reasons not because you're worried about page speed.

TIPS

Keep your menu tags and pulsing dots to a minimum, you wouldn't want your page to look like it has chicken pox.

FAQ

Can I change the text for Menu Tags?

The default text included in the code provided can be changed to whatever you'd like

Setup Instructions

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.

navigation-menu-tags-and-pulsating-circle

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.

website-navigation-menu-tags

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.

Next Steps

Similar to Menu Tags, Text Highlights allow you to emphasize text throughout your website in your hero, title, intro titles, and just about any text you want!

Next up:

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.