Unfortunately, if you click on the Projects page, you’ll see that there’s a bit of a problem. You can’t tell in our header that you’re actually on the Projects page!
Apparently, while the Dreamrs theme is using the nav-active class, and we have taken care to assign it to the relevant pages in our nav, there isn’t actually any CSS that does anything to the navigation if that class is applied. Let’s fix that. If we open up packages/dreamrs/themes/theme_dreamrs/sass/_menu.scss we can find the section that controls how the navigation looks:
We’re applying a red background on hover, but not doing anything on active. Let’s add a SASS rule here that will apply the same background to the navigation items when active as when they’re hovered over. This can be accomplished by adding a new rule for &.active on the li element, below .main-menu-item:
A quick clear of the browser cache, and a reload of the Projects page shows that our change has taken effect and works:
The home page still shows the black Projects navigation item, which means everything is working as it should be.