Menu Hover Effect

First of all i want to thank you all for providing such beautiful templates to joomla community.
I want to use sporter template for a home and garden website . I know, interesting approach

Started digging inside codes to customize the menu hover effect with a particular color, color that will be used inside CSS aswell for submenu bar.

First, i edited "menu_tab_middle" and "menu_tab_notlast" image files located inside templatesgk_sporterimages folder. So far so good.
But i noticed that the first tab and the last tab has some different hover effect.

Using fireburg i realised that if i change the class to "mega" for those specific <li items the menu work the way i wanted.
The modifications i want to do, that works in fireburg, but i want to "hard-code" them inside the files.

<div id="gksdl-mainnav" class="gk-menu">
<ul id="gk-menu" class="level0">
<li id="gksdl-mainnav1" class="mega active first icon-home active">
</li>

changed to
<li id="gksdl-mainnav1" class="mega icon-home">
</li>

same for
<li id="gksdl-mainnav125" class="mega last"

changed to
<li id="gksdl-mainnav125" class="mega"

Where i cand modify the above <li>'s and inside what files?
Fireburg doesn't say anything about files that contain these lines.

Thank you soo much!

Hi

Check or use this classes:

Code: Select all

ul#gk-menu.level0 li.mega.first:hover{}
ul#gk-menu.level0 li.mega.last:hover {}


Cheers

I couldn't find the above sugested line. In what file should i search for?
I searched in all kind of different files but couldn't find it.

I was thinking about changing the class generated in broswer, the one that fireburg "see".
If i am changing it inside firburg everything woks beautifull. But fireburg doesn't save changes so i have to change it inside files.

<div id="gksdl-mainnav" class="gk-menu">
<ul id="gk-menu" class="level0">
<li id="gksdl-mainnav1" class="mega active first icon-home active">

and

<li id="gksdl-mainnav125" class="mega last"

Thank you very much for your kind support!

What i am trying to achieve is something like in the picture attached

menu_example.jpg

I want to keep the rounded tabs on the menu, i don't want to change them.
Basically i want to apply a color for entire submenu bar (dropline) and menu tabs will turn into the same color but only on mouse-over

Hi

I suggest to change it in firebug and copy the code of all modifications to override.css file (remember to enable using this file in template's settings).

Thanks Teitbite for advice.
The problem is that i need to modify <li id="gksdl-mainnav1" class to "mega icon-home"
and can't find it anywhere in template.css

Really need some help

Problems solved!
What i did, if someone needs to obtain the same results:
1. edited image file "menu_tab_middle" : first item in that image is displayed on mouse "hover" (i added a red color on that tab)
2. Added in override.css the following lines:

#gk-nav #gk-mainnav .level0>li.first>a { background:transparent url('../images/menu_tab_middle.png') no-repeat left -87px; }
#gk-nav #gk-mainnav .level0>li.last>a { background:transparent url('../images/menu_tab_middle.png') no-repeat left -87px; }
#gk-nav #gk-mainnav .level0>li.first.last { background:transparent url('../images/menu_tab_middle.png') no-repeat right 0; padding-right: 22px; }
#gk-nav #gk-mainnav .level0>li.first.last>a { background:transparent url('../images/menu_tab_middle.png') no-repeat left -87px; }

Deleted the particular styling for the last tab from template.css

#gk-nav #gk-mainnav .level0>li.last { background:transparent url('../images/menu_tab_last.png') no-repeat right 0; padding-right: 22px; }

Cheers!

PS: I don't know if this is the correct path to achieve what i wanted but as far as i know it works

Hi

That is a really good solution.