Is it possible to add a CSS class called current-item to Current Navigation Item

[tammu]

Hi Everyone,

I am creating my main menu using the navigation sets and was wondering if there is a token to get the current navigation item when that item page is loaded or viewed. What I mean is if homepage is loaded add a CSS class to home menu item. Similarly if any other category or page is loaded add the CSS class to that menu item.

I have listed a simple example of what I trying to achieve.

<ul id="main-menu" class="menu-container">
   <li class="c-navigation__list current-menu"><a href=/SFNT.html">Home</a></li>
   <li class="c-navigation__list"><a href=/PLST.html">Shop All</a></li>
   <li class="c-navigation__list has-child-menu"><a href=/Some-Parent.html">Parent Category</a>
      <ul class="sub-menu">.....</ul>
   </li>
</ul>

As you can see when I am homepage, I am trying to add dynamically a CSS class called current-menu.

Thanks

[Matt Zimmermann]

If you are looking to make this a page level one, then you would have to add a conditional to check the current page vs the page being called and, if so, add the class.

[tammu]

Hi Matt,

Thank you for the reply, do you have a sample snippet to do the conditional check.

Also would I be able to use the same logic if it is a category or product link.

[Matt Zimmermann]

Is this a hard-coded navigation, a ReadyTheme Navigation Set, or something else? Depending on how you are generating it, the complexity will be different.

[tammu]

I am trying to use the ReadyTheme Navigation Set.

[Matt Zimmermann]

If you are using a ReadyTheme Navigation Set and it has multiple levels, then I would recommend mimicking the code used for the Account Navigation Set as it has all the conditionals you are looking for.

[tammu]

Thank you for the tip. I will check it out.