Add 'active' class to parent nav item

Dazzling
1

Hi,

I’m using the Dazzling theme and have sub nested nav (2 levels).

I.E.
About > Services

I want the parent Nav item to include the ‘active’ class so that it is highlighted when you are within the sub page. Does anyone know how to do this? I’ve noticed it doesn’t work on the demo site either. The sub item is active but not the parent.

Any ideas?

2

Hey there

it already has active class added, you can see this on our demo: https://colorlib.com/dazzling/contact-form/

3

Thanks for the response, but you misunderstood my question. I’m trying to get the parent Nav (About) item to be active also.

In your example, this should be the ‘About’ main Nav item. I feel this would provide better UX for the user as they always know where they are on the site.

Do you know how we can achieve this?

Thanks.

4

I actually just solved this myself.

I noticed there was an additional class called ‘current-menu-parent’. I’ve just targeted this in CSS with the same style as the ‘active’ class and it works a treat.

.navbar-default .navbar-nav > .current-menu-parent > a {
background-color: #a41e22;
border-color: #a41e22;
}

Great theme!

5

Hello,

Nice work solving this issue and thanks for sharing it to help others.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support