Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Problem with css-classes within my navigation
 
tease
Sr. Member
 
Total Posts:  115
Joined:  2010-10-06
 

Hi everybody,

I stumbled across a problem and I hope that somebody around here can give me an advice to get me in the right direction again.
I want to change the look of my shop a little and therefore I changed a little bit of the css code. Basically I only want to change the color of the links in my navigation bar.
Easy enough, but the problem I’m facing now is that only those links that were created by using “add category” show if they are selected or not. Additionally I added two CMS blocks to my navigation and those two are the problem.

I think I can axplain it better showing you some screenshots.

Screenshot Nr.1 shows how it should be:
the selected Link (in this case “Websites") is the color yellow (that’s also color of a:hover)

Screenshot 2 shows the way it looks when a CMS block is selected:
all links are the same color and the user doesn’t know where he’s at.

When I look at the HTML-Code I see that the links created within the “categories module” (those are the correct ones) are named like this:
“level0 first nav-home”
“level0 nav-1 level-top first”
“level0 nav-2 level-top last”

and the CMS Block links are named like this:
“nav-contacts last”
“nav-about last”

So, I guess the mistake is that the links have different class names.

All I want to do is to make those “CMS links” behave just like the “category” links. I tried to name those classes:
“level0 nav-3 level-top”
“level0 nav-4 level-top”
but didn’t accomplish anything with that.

I Hope somebody can point me i the right direction!

Thanks for taking the time.

Image Attachments
Bildschirmfoto 2011-01-28 um 15.46.36.pngBildschirmfoto 2011-01-28 um 17.26.54.pngBildschirmfoto 2011-01-28 um 17.26.14.png
 
Magento Community Magento Community
Magento Community
Magento Community
 
Sam @ RocketTheme
Jr. Member
 
Avatar
Total Posts:  15
Joined:  2011-01-28
RocketTheme
 

The easiet way to fix this is to use the body class of the cms page. So, for example, if we were using the sample data setup, the “About Us” page has a body class of cms-about-magento-demo-store. So if we wanted to make this link a different color when the page is active, you would do something like the following in your css:

.cms-about-magento-demo-store .nav-about { coloryellow}

Hope that helps.

 
Magento Community Magento Community
Magento Community
Magento Community
 
tease
Sr. Member
 
Total Posts:  115
Joined:  2010-10-06
 

Thanks for your reply.
I already did what you mentioned and the link changed its color. So no problem there.
The problem is not the color of the link but its behaviour.
All the other links are yellow when selected but the “about us” link doesn’t do that. It has the right basic color (green) and also the right color (yellow) when its focused but I want that it shows on which page you’re at the moment. Say when you’re at the homepage, the link that says “home” is yellow (just like the hover) and all the others are green. So you know at one sight that you’re at the homepage.

I’m sorry, I don’t know how to explain it properply.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Sam @ RocketTheme
Jr. Member
 
Avatar
Total Posts:  15
Joined:  2011-01-28
RocketTheme
 

Well that css should definitely work. It will only use that css if it’s on the “About Us” page because of the body class before it.

Perhaps it needs an !important after it?

.cms-about-magento-demo-store .nav-about { coloryellow !important}
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top