Active Links for Sub Nav

Develop, Build & Integrate CMS Development
1

Hello!

I have a subnav created on my page, and when you’re on a page that lives under one of the subnav pages, I want that link item to stay active (a color), so my idea was to add a little bit of javascript code to each landing page that would add a class…

For example, sub nav items:

BLOG | CASE STUDIES |

WEBINARS

When you’re looking at a webinar, the webinar link would be blue, so my idea was to add a snippet of javascript code to the Additional Code Snippets on each page that would add a webinar class to the body tag, or body-wrapper class that would mark it as a webinar page. But when I do that, the javascript code doesn’t work.

Are there any workarounds to this or any other ideas?

Thanks!

Samantha

2

@Oezcan , how would you tackle this?

3

I actually figured out a solution - I added a choice field to the sub nav module that the user selects when adding the sub-nav to their page. If they are creating a webinars page, they would select the webinars checkbox and it turns that link in the subnav blue. Then I just use css to style and javscript to read which checkbox was checked and then adds a class to the div.

.blog-active ul li .blog-nav,

.case-studies-active ul li .case-studies-nav,

.webinars-active ul li .webinars-nav {
color: #008dd0 !important;
}

$(‘#sub-nav-menu:contains(“blog”)’).closest(‘div’).addClass(‘blog-active’);

$(‘#sub-nav-menu:contains(“case_studies”)’).closest(‘div’).addClass(‘case-studies-active’);

$(‘#sub-nav-menu:contains(“webinars”)’).closest(‘div’).addClass(‘webinars-active’);