Magento

Ok here is my dilemma. I’m trying to set up the navigation for when you click a category the category that you click is “Active” which has a different style. I have attached 2 images. One with the regular navigation and one with a HOVER state. I want when you click that category to stay in the hover “style”. Right now when i click on a category it reverts back to the regular navigation state. I know there must be a simple solution for this because i seen plenty if sites with “active” navigation. Hope someone can help me out with this.

Click thumbnail to see full-size image

This is actually an easy fix, under skin / frontend / default / [theme name] / css / menu.css

add a background color to the #nav li.active line

it should look something like this

#nav li.active { z-index:98; background:#YOURCOLOR);}

or you can add a background image by doing something like this

#nav li.active { z-index:98; background:url(../images/IMAGENAME.gif) no-repeat 0 100%;}

hope this helps, PM me if you need additional assistance.

I forgot to mention that i replaced the default navigation HTML with my own custom HTML & CSS. That would work if i had not replaced the default navigation HTML
The location of the file i edited is app/design/frontend/default/default/template/catalog/navigation/top.phtml

Hi,

I am experiencing a similar issue - hope someone can help?

I have added a home link to the top nav -

I need to test if the user is on the homepage so I can set the class to active. Any ideas?

Cheers,
Simon

skrambo- You need to test if you are on the home page and if you are then echo the “active”. 

jvalen- You have to add a class="active" to the <li> that has the current active category from your menu.  In other words, using your example, if you are in the “customer service” category you need to make sure the menu has

then using css you can make make it active with

li.active a {background-color: #ff0084;}

likewise, for the “fragrance” category you’ll need to make that li have a class of “active” when you are in that category OR any of it’s subcategories.

Hope this helps.

Thanks xjavs,

If you see the code I have a echo to set the class to active based on a if statement. Just don’t know what the if statement should be.

How would I test if they are on the home page?

Cheers,
Simon

I would use css to accomplish what you are trying to do. Instead of the code you have I would do something like:

And since the body of the home page has a class of “cms-home” I would modify the following css code on line 36 (assuming you are using the menu.css):

That should do the trick.

@xjavs,

It doesn´t work here…

li.active is a rude boy…

Anyone got a solution that really works for this?

There are several theads asking about <li class="active">.

But anyone give a solution.

Magento Team, please help us with this basic question.

Ok here is the solution to have the Home-link being active if no categories are active:

You can see how this works on our OpenAir-template at http://demo.ecommerce-extensions.com/openair

aFFi, you´re my savior.

This works perfect. I think this lines must go and update the wiki.

I changed class="current-cat" to class="active", so it´s as the default class.

Thank you very much, really!

AFFi, I have a question:

If I have more than one link, thant is not a category link, then how can achieve it?

In the same way as my example. The link in the example will activate the CSS if the user doesnt have any category active.

Yes, but image this scenario:

HOME | CATEGORY 1 | CATEGORY 2 | PAGE 1 | CONTACT

If I´m not into category 1 or 2, all the others links will be “Active”. This is what I mean.

I figured out this code to make cms links active. I still don’t know if this is the best way of doing it but it worked in my case anyway.

The strpos function looks for something in a string. In this case it looks for the page link name ("contacts") in the URI, that you get through $_SERVER[’REQUEST_URI’]. If it finds it, it means the link is active.

It doesn’t work for the “home” link thou. It needs something else but I haven’t managed that yet. I hope someone can help me with that.

Hope it helps someone. This surely gave me an headache.