Support » Themes and Templates » Different hover bg color for top and sub levels of menu

Viewing 11 replies - 1 through 11 (of 11 total)
  • Maybe you can make use of or adapt how I think my Twenty Twelve does that:
    .nav-menu {
    background: #533229; /* very dark desaturated red */
    background: -moz-linear-gradient(top, #533229 0%, #2b241e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #533229), color-stop(100%, #2b241e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #533229 0%, #2b241e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #533229 0%, #2b241e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #533229 0%, #2b241e 100%); /* IE10+ */
    background: linear-gradient(to bottom, #533229 0%, #2b241e 100%); /* W3C */
    }`

    Thanks for your suggestion Leejosepho but I haven’t been able to make that work.

    Does anyone else have any ideas?

    esmi

    (@esmi)

    Forum Moderator

    Do not edit the Twenty Ten theme itself. First create a child theme for your changes. Or install a custom CSS plugin.

    This should target the top menu items

    .menu li:hover a {
       background: #FFF;
    }

    This for the submenu items

    .sub-menu li:hover a {
       background: #FFF;
    }

    Hi Esmi, thank you for the advice. I have installed a custom CSS plugin and added my own drop-menu css code but am not sure how to get the system to call that menu code instead of the default?

    Ronangelo, Thank you for your suggestion – I did try that code and many variations but to no effect.

    Where did you add the code I’m not seeing it on your site?
    You could try adding !important like this
    background: #FFF !important;

    Or are you using a caching plugin or maybe cloudflare?

    Ronangelo, I had added the code in the stylesheet in the Twenty Ten Child theme I created this morning but the ‘menu’ tags seem to be labelled ‘access’ in this theme so I played around with that for a while.
    Since then I have installed a custom CSS plugin and added my own drop menu css code, however I am not sure how to get the page to call the custom menu code.

    esmi

    (@esmi)

    Forum Moderator

    I suggest you review child themes. Your child theme should not contain a complete copy of the parent’s stylesheet.

    Ah, thank you. So the child theme stylesheet should only contain the attributes I have changed from the parent?

    esmi

    (@esmi)

    Forum Moderator

    Correct. Ditto for all template files – only customised versions are stored in the child theme.

    Groovy, thanks so much. I’m still a bit having issues getting my custom stylesheet to work but think I am heading in the right direction now.

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Different hover bg color for top and sub levels of menu’ is closed to new replies.