Background on menu buttons how to remove?


on the main menu any item selected has a grey background I want to keep the thin grey separators between each item but want to remove the grey background and shadow.
In firebug I found that playing with this code would fix it but can’t come up with the right code to enter into the custom.css to override the master css file.

.gf-menu.l1 > > .item {
    background-color: #EDEDEF;
    background-image: linear-gradient(#D8D8DA, #EDEDEF 30%, #EDEEF0); [COLOR="#FF0000"]Turning this line off fixed the issue.[/COLOR]
    background-repeat: no-repeat;
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 25px;
    position: relative;
    z-index: 1;


Try something like this:

.gf-menu.l1 > > .item:after,
.gf-menu.l1 > > .item:before {display:none}
.gf-menu.l1 > > .item{background:none;border:none}
.gf-menu.l1 > .rt-item-shadow {display:none}

Paul I added the code to the override file but no change menu items still have the grey background.

It’s working for me on the live site. Did you clear cache?

Paul it is working thank you for the help. For some reason clearing my cache will not work not sure what is going on. On a Mac using Firefox and Chrome. I used the shift/cmd/R keys and the preference method but they just won’t clear for some reason. Even set FF to no cache. The site had cache turned off.

I’ve noticed in the past that some sites can be difficult to clear cache but don’t know why. Usually in Firefox a shift + refresh does the trick.