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

[Cignition]

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.

[dennisedson · Accepted solution]

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

[Anton · Accepted solution]

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

[Cignition]

Thanks! Great info

[dennisedson]

@Anton, that span info is gold!

[dennisedson · Accepted solution]

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

[Cignition]

Thanks for the info.