Active menu state behind default menu state

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

Active menu state behind default menu state

willbo987

Hi there.

I am quite new to Joomla and would call myself a hobby man when it comes to HTML.

I have taken a template I purchased and am editing it.

I am dealing with the Main menu items at the top of my page:
http://www.tumblingtigers.co.uk/tigers/ ... p/about-me

I am trying to get the ACTIVE menu item background above the normal item. As seen on my site currently the normal background image (black paw) is overlaying the active item (green circle).

I have notice that the menu items in the CSS are based on "#navigation a" and "navigation a:hover" BUT the active background item is based on "'navigation li.active"

I have tried using "navigation a.active" and "navigation a:active" but does not work.

Can someone help

Will

PS. the CSS code is based as http://www.tumblingtigers.co.uk/tigers/ ... defaut.css

willbo987

Sorry,

Link to the site is:
http://www.tumblingtigers.co.uk/tigers/index.php/about-me

Link to the CSS is:
http://www.tumblingtigers.co.uk/tigers/templates/viagranitti1.7/css/tdefaut.css

Dava1986

your problem seems a bit easy

find

#navigation li.active {

Replace with

#navigation li.active a{

that should sort the problem and allow you to set a current icon for that link

ssystems

Dava1986;1217091 wrote:
your problem seems a bit easy

find
#navigation li.active {
Replace with
#navigation li.active a{
that should sort the problem and allow you to set a current icon for that link

Shouldn't it be

#navigation li:hover

Haven't tried but the image is on the list-item element not in anchor

willbo987

Hi Dava1986 and ssystems.

Davas solution worked.

When using Joomla, it uses the .active to refer to the current page that your on.

It just confused me as to why all the states were set on #navigation a:hover etc although this particular was set on #navigation li.active.

But changing it to:

#navigation li.active a{ WORKED!!!.

Thanks again

Will