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.
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.
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 bymarking it as a solution
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 bymarking it as a solution
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.