www.webdeveloper.com
Results 1 to 5 of 5

Thread: Active menu state behind default menu state

  1. #1
    Join Date
    Aug 2012
    Posts
    4

    Active menu state behind default menu state

    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

  2. #2
    Join Date
    Aug 2012
    Posts
    4

  3. #3
    Join Date
    Jul 2012
    Location
    Stockport, Manchester, United Kingdom
    Posts
    11
    your problem seems a bit easy

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

  4. #4
    Join Date
    Oct 2009
    Posts
    658
    Quote Originally Posted by Dava1986 View Post
    your problem seems a bit easy

    find
    Code:
    #navigation li.active {
    Replace with
    Code:
    #navigation li.active a{
    that should sort the problem and allow you to set a current icon for that link
    Shouldn't it be
    Code:
    #navigation li:hover
    Haven't tried but the image is on the list-item element not in anchor

  5. #5
    Join Date
    Aug 2012
    Posts
    4

    Sorted and solved

    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles