Joomla Templates Club 406,261 posts

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#156547

Okay, either I am simply crazy or the logic behind the css coding in this template makes no sense whatsoever.

WHAT css element is controlling the “hover” element in the mega menu sub navigation area?
(see image below)

I have looked throughout both the template.css and the mega.css files thoroughly … experimented extensively … but cannot FOR THE LIFE OF ME figure out what css element is controlling the hover action/display. In a nutshell, I want to change it, but nothing I have tried has worked.

PLEASE HELP !!!

:((

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#363300

Anyone ??

Anyone ??

Bueller ??

Bueller ??

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#363354

Hello

Please open the file: /templates/ja_kyanite_ii/css/colors/blue.css and find

ul.level1 li.over.first, ul.level1 li.haschild-over.first { background: #333; }

change background when mouse hover in above rule

you open the file: templates/ja_kyanite_ii/css/menu/mega.css

ul.level0 li.over, ul.level0 li.haschild-over,
ul.level0 li.over.first, ul.level0 li.haschild-over.first {
color: #fff;
border-radius: 5px 5px 0px 0px; /* CSS 3 */
-moz-border-radius: 5px 5px 0px 0px; /* Firefox */
-icab-border-radius: 5px 5px 2px 0px; /* iCab */
-khtml-border-radius: 5px 5px 0px 0px; /* Konqueror */
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px; /* Safari and Chrome*/
margin-top: 0;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
padding-right: 3px;
background-image: url(../../images/mainnav-bg.gif);
background-repeat: no-repeat;
background-position: -50px -48px;
}

replace:

ul.level0 li.over, ul.level0 li.haschild-over,
ul.level0 li.over.first, ul.level0 li.haschild-over.first {
color: #fff;
margin-top: 0;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
padding-right: 3px;
background-image: url(../../images/mainnav-bg.gif);
background-repeat: no-repeat;
background-position: -50px -48px;
}

add the following css into this file templates/ja_kyanite_ii/css/menu/mega.css

ul.level0 > li {
border-radius: 5px 5px 0px 0px; /* CSS 3 */
-moz-border-radius: 5px 5px 0px 0px; /* Firefox */
-icab-border-radius: 5px 5px 2px 0px; /* iCab */
-khtml-border-radius: 5px 5px 0px 0px; /* Konqueror */
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px; /* Safari and Chrome*/
}

1 user says Thank You to Saguaros for this useful post

1. TomC

[Author]

Posts