When a page is visited, the corresponding menu item is automatically assigned the “active” class. This is why the menu item for the currently visited page appears with a different color.
However, it seems that this functionality doesn’t work with subpages. Let’s consider the following page structure:
Home
Products
Car 1
Car 2
Contact
When the user visits the subpage “Car 1,” the “Products” menu item is not highlighted. But when the user visits “Contact,” the “Contact” menu item is highlighted. I want the “Products” menu item to be highlighted (i.e., assigned the active class) when the user visits either “Car 1” or “Car 2.”
I couldn’t find any built-in functionality to achieve this. Did I miss it? If there is no such feature available, what would be the best approach to accomplish this?
The best solution I can think of is using a jQuery method that checks the URL of the current page and then adds the “active” class accordingly. However, this is quite hacky
@Armin_Hang unfortunately not. I was also quite surprised that this topic never came up in the other threads. As mentioned in my first post, I think it should work with checking the current URL in the jQuery code and then adding a CSS class. Obviously this has to be manually maintained (if the url changes it will break) and is quite hacky.
Hey @chedched - yes you are right. We are ghost reading as best as possible
Usually, if we can help quickly or if this is a Sitejet-Issue, we also respond directly. In your described case that would only be possible via custom code, I’m afraid.
I would recommend to set up a feature request or change that topic to a feature request. But maybe some users like @Lucian_Dinu or @Imre_Fekete who are very familiar with custom code can assist for now?
Thanks @Andre, no worries. As said I believe I found a custom solution already, but of course I’d be happy to learn if there is a more elegant approach. Thanks for replying though, I really appreciate it!
Hello @chedched, would you mind sharing the custom code solution, please? This may be useful for anyone seeking for solving this issue. Thank you in advance.
Let’s assume the menu bar has the ID “1234”. If the URL ends with “/car1” or “/car2”, we want to add the “active” class to the “products” menu item.
// Make menu active if subpage of menu is visited
$(function() {
if(currentUrl.endsWith("car1") || currentUrl.endsWith("car2")) {
$('div#1234 > ul.menu-level-0 > li:nth-child(2) > a').addClass('active');
}
});
For those who are not so familiar with JS code:
currentUrl.endsWith("car1") || currentUrl.endsWith("car2") : the “||” means “OR”. You need to separate all checks with “||” if you have more than one URL ending that you want to check.
$('div#1234 > ul.menu-level-0...: This means get the unordered list (= the menu items) inside the div with the ID “1234”. If you have multiple nested divs (they are auto-generated by Sitejet, how depends on the menu you are using), you might need to adapt this part. Using the code inspector of your browser will help, but it will be hard to figure it out without any coding experience I fear.
nth-child(2) refers to the second menu item of the navbar (“Products” in this example). If you want to highlight the third menu item in your navbar you need to use “nth-child(3)” and so on.
