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

SOLVE
New Contributor

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.

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Regular Advisor | Platinum Partner

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

dennis
Reply
0 Upvotes
Highlighted
Advisor

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







check Did my post help answer your query? Help the Community by marking it as a solution
5 Replies 5
Regular Advisor | Platinum Partner

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

dennis
Reply
0 Upvotes
New Contributor

Thanks for the info.

Reply
0 Upvotes
Highlighted
Advisor

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







check Did my post help answer your query? Help the Community by marking it as a solution
Regular Advisor | Platinum Partner

@Anton, that span info is gold!

dennis
New Contributor

Thanks! Great info

Reply
0 Upvotes