Joomla Templates Club 406,261 posts

[tworld Friend tworldJoin date: October 2011Posts: 58Downloads:0Uploads:5 Thanks: 6 Thanked: 1 times in 1 posts]

#171191

I’ve added a special CSS rule to change the link and background color of the top-level links on my Mega Menu, like this:

ul.level0 li.mega a.haschild:focus, ul.level0 li.mega a.haschild:hover { {
color: #fff;
background-color: #006699 !important;
}

But when I move my cursor over the sub-menu links, the background color of the top-level links disappears. What other CSS rule do I need to define to fix this problem? See attached image.

---

Attachments:

1. 

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#427118

You replace your code with

ul.level0 li.haschild-over a.over {
background: #069;
color: white;
}

[tworld Friend tworldJoin date: October 2011Posts: 58Downloads:0Uploads:5 Thanks: 6 Thanked: 1 times in 1 posts]

#427181

This also puts the same background color for the sub-menu, though. I want to sub-menu to stay the way they are, the only thing I want to change is the top level. I tried adding the following, but it doesn’t work:
.ja-megamenu ul.level1 li.mega a.over, .ja-megamenu ul.level1 li.mega a:hover, .ja-megamenu ul.level1 li.mega a.over span.menu-title {
background: none repeat scroll 0 0 transparent;
}


[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#427301

You just use my code, like that


ul.level0 li.haschild-over a.over {
background: none repeat scroll 0 0 transparent;
color: black;
}


[tworld Friend tworldJoin date: October 2011Posts: 58Downloads:0Uploads:5 Thanks: 6 Thanked: 1 times in 1 posts]

#427341

Your code doesn’t do what I want. What I want is this:

– level0 background color to be #006699 and level0 text color to be white
– level1 links background color to be transparent and the link colors to be same as default
– also, when the cursor moves to level1 links i want level0 background color to STAY #006699 and level0 text color to STAY white

I thought the last CSS rule I showed you would work, but it doesn’t because there is another rule that is overriding it for some reason.

So, is what I want possible with the Mega Menu? It seems it should be, but I am not sure which rules target the level1 links and background colors of those links ( <a> and <span> tags) properly.

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#427705

I understand what you mean. You try this way:
– You remove this code from /templates/ja_ores/local/themes/trauma-world/css/menu/mega.css

ul.level0 li.mega a:hover, ul.level0 li.mega a:active, ul.level0 li.mega a:focus, ul.level0 li.mega a.sfhover {
color: #353535;
}
– You replace this code from /templates/ja_ores/local/themes/trauma-world/css/light-theme.css


ul.level0 li.haschild-over a.over {
background: none repeat scroll 0 0 transparent;
color: white;
}
with

ul.level0 li.haschild-over a.over {
background: #069;
color: white;
}

1 user says Thank You to khoand for this useful post

1. tworld

[tworld Friend tworldJoin date: October 2011Posts: 58Downloads:0Uploads:5 Thanks: 6 Thanked: 1 times in 1 posts]

#428081

Yup, that fixed the problem. Thanks!

[Author]

Posts