How to set active css class for "Top Navigation Menu"

Question

Hi Team,

This is the menu structure on HOME Page...

<ul class="main_menu">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Services</a></li>
<li><a href="/">Contact</a></li>
</ul>

But when user is on ABOUT US Page... It should be like this...

<ul class="main_menu">
<li><a href="/">Home</a></li>
<li class="active"><a href="/">About</a></li>
<li><a href="/">Services</a></li>
<li><a href="/">Contact</a></li>
</ul>

How can i change css class (i.e. "active") in SEO Toaster ?

Answer 1

Hello anshul,

The SeoToaster adds the class "current" only to the links in the menu. If the user is on "About Us" page the menu structure looks like :

<ul class="main_menu">
<li><a href="/">Home</a></li>
<li><a href="/" class="current">About</a></li>
<li><a href="/">Services</a></li>
<li><a href="/">Contact</a></li>
</ul>

If you need to use this class to apply some styles, you can either connect it to the link or to use  jquery to add the class "active" for "li" when it contains "a.current"

Thank you for using SeoToaster!
Kind regards,
Seotoaster support

Comments

Thanks... Your answer solved my issue... Once again thanks for it...