Targeting one specific page with css

Highlighted
New Contributor

On our blog listing page (blog.juliusworks.com) we have a sub-navigation menu. One link points to a secifc HubSpot blog tag (https://blog.juliusworks.com/tag/podcast).

 

We are looking to have our active page underlined in the sub-nav but for some reason HubSpot is underlining both pages. After further investigation, it looks like both pages have identical hs-blog-id-8652403895 as the page unique identifier. I have tried to add css to have it only target the exact page but I'm getting stuck targeting between the two. 

 

.blog-secondary-nav li:nth-child(1).hs-menu-item.hs-menu-depth-1.active.active-branch {
  border-bottom: #eb1d8c 3px solid;
}

/* -----to target podcast page ---- */
.blog-secondary-nav li:nth-child(2).hs-menu-item.hs-menu-depth-1.active.active-branch {
  border-bottom: #eb1d8c 3px solid;
}
.blog-secondary-nav li:nth-child(1).hs-menu-item.hs-menu-depth-1.active.active-branch {
  border-bottom: none !important;
}

Does anyone know how we can target this second page?

CSS
Reply
0 Upvotes
1 Reply 1
Community Manager

Hey @Jordan3   

 

I apologize for the delay in getting back to you. I am wondering if you were able to resolve this or if you still need assistance on this matter?     

 

Thank you

Sharon

Reply
0 Upvotes