# Active Links for Sub Nav

**URL:** <https://community.hubspot.com/t/active-links-for-sub-nav/53868>\
**Category:** CMS Development\
**Created:** [March 25, 2022, 6:21pm UTC](https://community.hubspot.com/t/active-links-for-sub-nav/53868 "2022-03-25T18:21:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![SRinehart](https://avatars.discourse-cdn.com/v4/letter/s/6f9a4e/32.png) [@SRinehart](https://community.hubspot.com/u/SRinehart)\
**Post date:** [March 25, 2022, 6:21pm UTC](https://community.hubspot.com/t/active-links-for-sub-nav/53868/1 "2022-03-25T18:21:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [March 28, 2022, 2:14pm UTC](https://community.hubspot.com/t/active-links-for-sub-nav/53868/2 "2022-03-28T14:14:35Z")

</div>

@Oezcan , how would you tackle this?

---

<div class="post-metadata">

**Author:** ![SRinehart](https://avatars.discourse-cdn.com/v4/letter/s/6f9a4e/32.png) [@SRinehart](https://community.hubspot.com/u/SRinehart)\
**Post date:** [March 28, 2022, 2:51pm UTC](https://community.hubspot.com/t/active-links-for-sub-nav/53868/3 "2022-03-28T14:51:50Z")

</div>

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’);