CMS Development

Cignition
Participant

How to add a class to a menu item to link to a content pop-up?

SOLVE

I'm trying to create a 'Pricing' menu item that goes to a content pop-up, versus a new page, but I can't find how to add a class to an individual menu item.

0 Upvotes
2 Accepted solutions
dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

How to add a class to a menu item to link to a content pop-up?

SOLVE

@Cignition, to the best of my knowledge, you cannot by traditional means if using the custom menu.  You will have to target it with some of that JS special sauce. 

View solution in original post

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to add a class to a menu item to link to a content pop-up?

SOLVE

Hi @Cignition

you can add specific classes to a single menu item(we're speaking of the navigation that you can set up in your portal settings, right?!) by following 'workarounds'.

 

1. simply put a 'span' item around the menu item name. Yes, the navigation in the settings can "translate" HTML code. 

<span class="YOUR CLASS">YOUR MENU ITEM NAME</span>

After this you can style it with CSS and do custom JS scripts

 

2. You can work with so-called "pseudo"-classes. Read more about them here, here and here

With this method the CSS/JS part should look something like this:

.custom-menu-primary .hs-menu-wrapper>ul li:last-of-type(2){

/* YOUR CSS part goes here
*/
}

or

<script>
    $(document).ready(function () {
    $('.custom-menu-primary .hs-menu-wrapper>ul li:last-of-type(2)).on('click', function (e) {
// YOUR CODE GOES HERE
});
</script>

notice that these codes are just an example

 

 

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution
Anton Bujanowski Signature

View solution in original post

5 Replies 5
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to add a class to a menu item to link to a content pop-up?

SOLVE

Hi @Cignition

you can add specific classes to a single menu item(we're speaking of the navigation that you can set up in your portal settings, right?!) by following 'workarounds'.

 

1. simply put a 'span' item around the menu item name. Yes, the navigation in the settings can "translate" HTML code. 

<span class="YOUR CLASS">YOUR MENU ITEM NAME</span>

After this you can style it with CSS and do custom JS scripts

 

2. You can work with so-called "pseudo"-classes. Read more about them here, here and here

With this method the CSS/JS part should look something like this:

.custom-menu-primary .hs-menu-wrapper>ul li:last-of-type(2){

/* YOUR CSS part goes here
*/
}

or

<script>
    $(document).ready(function () {
    $('.custom-menu-primary .hs-menu-wrapper>ul li:last-of-type(2)).on('click', function (e) {
// YOUR CODE GOES HERE
});
</script>

notice that these codes are just an example

 

 

regards

Anton

Did my post help answer your query? Help the Community by marking it as a solution
Anton Bujanowski Signature
Cignition
Participant

How to add a class to a menu item to link to a content pop-up?

SOLVE

Thanks! Great info

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

How to add a class to a menu item to link to a content pop-up?

SOLVE

@Anton, that span info is gold!

dennisedson
Solution
HubSpot Product Team
HubSpot Product Team

How to add a class to a menu item to link to a content pop-up?

SOLVE

@Cignition, to the best of my knowledge, you cannot by traditional means if using the custom menu.  You will have to target it with some of that JS special sauce. 

0 Upvotes
Cignition
Participant

How to add a class to a menu item to link to a content pop-up?

SOLVE

Thanks for the info.

0 Upvotes