main menu does not show active state color change [#1927270]

I created a page (about us) with main menu link. When I click to the about us page, the main menu ABOUT US item does not change color to show that I am at that page.
Does the menu have active state capability?

Comments

Comment #1

skech CreditAttribution: skech commented 26 February 2013 at 20:02

Hi owlee,

you can add the following selectors at line 466 of file corkedscrewer/css/style.css and you will get the desired effect

   #menu .sf-menu li:hover,
   #menu .sf-menu a:focus,
   #menu .sf-menu a:hover,
   #menu .sf-menu a:active,
++ #menu .sf-menu a.active,
   #menu .menu li:hover,
   #menu .menu a:focus,
   #menu .menu a:active,
++ #menu .menu a.active  {
    background: #6f0025; /* Old browsers */
    background: -moz-linear-gradient(top,  #6f0025 0%, #3f000f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6f0025), color-stop(100%,#3f000f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #6f0025 0%,#3f000f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #6f0025 0%,#3f000f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #6f0025 0%,#3f000f 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #6f0025 0%,#3f000f 100%); /* W3C */
    outline: 0;
    }

Thanks
Soukri

Comment #2

skech CreditAttribution: skech commented 26 February 2013 at 20:57

Please ignore the above solution it is not working properly for menu items with submenus,

Soukri

Comment #3

skech CreditAttribution: skech commented 26 February 2013 at 21:49

You can do the following changes/additions

line 466

   #menu .sf-menu li:hover,
   #menu .sf-menu a:focus,
   #menu .sf-menu a:hover,
   #menu .sf-menu a:active,
++ #menu .sf-menu > li > a.active,
   #menu .menu li:hover,
   #menu .menu a:focus,
   #menu .menu a:active,
++ #menu > .menu > li > a.active {
    background: #6f0025; /* Old browsers */
    background: -moz-linear-gradient(top,  #6f0025 0%, #3f000f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6f0025), color-stop(100%,#3f000f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #6f0025 0%,#3f000f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #6f0025 0%,#3f000f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #6f0025 0%,#3f000f 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #6f0025 0%,#3f000f 100%); /* W3C */
    outline: 0;
    }

line 523

#menu li.expanded > a {
-- background: url('../images/menu-sub-indicator.png') no-repeat 92% 50%;
++ background-image: url('../images/menu-sub-indicator.png');
++ background-repeat:  no-repeat; 
++ background-position: 92% 50%;
   display: block;
    }

line 529 add the following code

++ #menu > .menu > li.expanded > a.active {
++ background: #6f0025;
++ background-image: url('../images/menu-sub-indicator.png');
++ background-image: url('../images/menu-sub-indicator.png'), -webkit-gradient(linear, left top, left bottom, from(#6f0025), to(#3f000f)); /* Saf4+, Chrome */
++ background-image: url('../images/menu-sub-indicator.png'), -webkit-linear-gradient(top, #6f0025, #3f000f); /* Chrome 10+, Saf5.1+ */
++ background-image: url('../images/menu-sub-indicator.png'),    -moz-linear-gradient(top, #6f0025, #3f000f); /* FF3.6+ */
++ background-image: url('../images/menu-sub-indicator.png'),     -ms-linear-gradient(top, #6f0025, #3f000f); /* IE10 */
++ background-image: url('../images/menu-sub-indicator.png'),      -o-linear-gradient(top, #6f0025, #3f000f); /* Opera 11.10+ */
++ background-image: url('../images/menu-sub-indicator.png'),         linear-gradient(top, #6f0025, #3f000f);
++ background-repeat:  no-repeat; 
++ background-position: 92% 50%;
++ display: block;
    }

Thanks
Soukri