Individual Styling for Grandchild-Nav

[christian_w 0]

Hello everyone, I am trying to assign an individual a:hover style to the items in my grandchildnav widget. I figured out how to address the individual menu items e.g.

.page-item-226 {border-left: 3px solid #FF7400;}

However, I can't figure out how to change the a:hover style. I tried this line of code, which didn't work:

.page-item-219  ul li a:hover {border-left: 3px solid #FF7400;}

Suggestions would be highly appreciated. Thanks.

[catrina 103]

You can try this instead:

li.page-item-219 ul a:hover {border-left: 3px solid #FF7400;}

[christian_w 0]

Hi Catrina, thanks for the tip, but this doesn't work either. Any other ideas?

[catrina 103]

Try this one:

#grandchildnav li a:hover {border-left: 3px solid #FF7400;}

[christian_w 0]

Hi Catrina, this line of code gives me the desired effect on every grandchild-nav menu. My initial problem was, however, to assign certain colors to certain child menus. So I guess I necessarily need to address the individual page-items.

[kastelic 6]

Christian, can you post a link to your site, that would make this easier.

[christian_w 0]

Hi Jimmy, here's the link to my site: http://krimtheo.criminologia.de/theorien/lerntheorien-subkulturtheorien If you click on "Kriminalit?¤tstheorien"in the main-nav menu you'll notice that I've assigned a color to each sub-menu. My goal is to use these specific colors for the corresponding grandchild-menus. So far I managed to assign a colored border to specific page-items or to include an a:hover style for every page-item in all grandchild-navs. But - as mentioned above - I cannot manage to assign an a:hover style to specific page-items in the grand child nav.

[christian_w 0]

Hi Jimmy, here's the link to my site: http://krimtheo.criminologia.de/theorien/lerntheorien-subkulturtheorien If you click on "Kriminalit?¤tstheorien"in the main-nav menu you'll notice that I've assigned a color to each sub-menu. My goal is to use these specific colors for the corresponding grandchild-menus. So far I managed to assign a colored border to specific page-items or to include an a:hover style for every page-item in all grandchild-navs. But - as mentioned above - I cannot manage to assign an a:hover style to specific page-items in the grandchild-nav.

[Kate 3]

Hi Christian - You mean these boxes, correct: http://krimtheo.criminologia.de/theorien Did you notice that each of them has a unique ID? For instance "fbox_30". You should be able to use those to target the hover attribute for the links.

[christian_w 0]

Hi Kate, no, as I wrote above I am talking about the a:hover effect for the grandchild nav menues on the subpages e.g. the four menus

• Theorie des sozialen Lernens (Akers)
• Subkulturtheorie (Cohen)
• Theorie der differentiellen Gelegenheiten (Cloward & Ohlin)
• Neutralisierungsthese (Sykes und Matza)

which are located here: : http://krimtheo.criminologia.de/theorien/lerntheorien-subkulturtheorien

[Kate 3]

I see Christian... sorry I misunderstood. But, actually, the same principle applies. Each of those list items has a unique class. For instance, the first one is "page-item-219". So, you can use that to target its link. Make sense?

[christian_w 0]

yes, totally; my only problem is that I can't get it to work. If you read my initial post again I tried

.page-item-219 ul li a:hover {border-left: 3px solid #FF7400;}

which still looks right to me, but does not do the job.

[cmunns 16]

You need a more specific rule to override the dynamic css which uses these two for hover and current item hover. `#grandchildnav li a:hover, #grandchildnav .current_page_item ul li a:hover {}`

[christian_w 0]

Thanks cmunns, thank you for your advise, but I still don't get it. Now I combined your code with the selector for the specific page-item:

#grandchildnav li a:hover, #grandchildnav .current_page_item ul li a:hover .page-item-219 ul li a:hover {border-left: 3px solid #FF7400;}

But this this isn't working either. Instead of only affecting the page-item-219 the a:hover effect affects every grandchild-menu. What am I doing wrong?

[bryan-hadaway 3]

Where are you seeing `page-item-123`? Are you sure you don't mean `menu-item-123`? I would think you would want: `.menu-item-226 a, .menu-item-226 a:hover{border-left:3px solid #FF7400}` Thanks, Bryan

[christian_w 0]

Hi Bryan, good point - but no! Firebug is telling me, the name of the menu would be <li class"page_item page-item-219">. Please let me explain again: I have a three level hierarchy (e.g. Kriminalit?¤tstheorien --> Lerntheorien/ Subkulturtheorien --> Theorie des sozialen Lernens (Akers)). I have assigned a certain colors to the menu elements on the second hierarchy level (e.g. #FFD200 for Lerntheorien/ Subkulturtheorien). What I am trying to accomplish is to use that color for the elements in my grandchild navigation as an a:hover effect - but ONLY for the respective grandchild elements. Please see here: http://krimtheo.criminologia.de/theorien/lerntheorien-subkulturtheorien/theorie-des-sozialen-lernens-akers Thanks!

[Kate 3]

Hey Christian - Have you tried the !important declaration yet? Perhaps in conjunction with the code @cmunns suggested?

[christian_w 0]

Hey Kate, yes I tried that as well but it didn't work either.

[cmunns 16]

Ok then you would do without the a as you want the list items themselves to have this effect as you did it with the main nav ` .page-id-xx #grandchildnav li:hover { border-left: 15px solid #FA0; } ` etc, etc for each page. May have to remove the a properties: ` #grandchildnav .current_page_item a, #grandchildnav li a:hover, #grandchildnav .current_page_item ul li a:hover { background: transparent; border-left: 0px; } ` Where are you adding this CSS? It shouldn't have problems inside the custom css but if you do have problems with it not working add `body` before the selectors I used above.

[christian_w 0]

Hey cmunns, your advice sounded really promising but unfortunately it's not working. I tried both methods you've suggested. I modified the base.css file as well as added the code into the custom css section. The second line of code worked fine and I got rid of the grey border. But neither

.page-item-xx #grandchildnav li:hover {
	border-left: 15px solid #FA0;
	}

nor

body .page-id-xx #grandchildnav li:hover {
	border-left: 15px solid #FA0;
	}

seem to have any effect at all. This problem is getting really frustrating. Does anyone have another idea how I could possible affect the a:hover status within the grandchild navigation?

[Kate 3]

Okay Christian... two things: First, you're missing an end bracket after this line:

.textwidget {transparent url('images/study_paper.png') no-repeat center right;

The changes I was making weren't being reflected and it took a minute to figure out why So, be sure to add that. Then, try this:

#grandchildnav a{background:transparent !important;}
	#grandchildnav li{border-left:15px solid #ffffff;}
	#grandchildnav li.page-item-219:hover{border-left:15px solid orange;}

The "orange" is just an example... I'm sure you'll want to change that. So, basically, what's happening here is the

15px solid #ffffff

is just a space filler so that the menu items don't indent when the new border appears. Make sense? Alternatively you could've used a padding or margin on all lis, then taken it off on hover. Anyhow, all you should need to do is copy that last line for each item, replacing the "page-item" class. Hope that helps!

[christian_w 0]

BAZINGA! Thank you so much Kate. That is exactly what I was looking for.