WordPress.org

Ready to get started?Download WordPress

Forums

Different hover bg color for top and sub levels of menu (12 posts)

  1. Lillybelle
    Member
    Posted 11 months ago #

    I am using template TwentyTen.

    Is it possible to have different hover background colors set up for the top and sub levels of my horizontal menu bar?

    I've tried lots of variations in the css but always the setting for the sub level overrides the top level.

    Here is the page I am working on:

    http://www.waikatopodiatryclinicltd.123abc.co.nz/wordpress/

    Thanks in advance.

  2. leejosepho
    Member
    Posted 11 months ago #

    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 */
    }`

  3. Lillybelle
    Member
    Posted 11 months ago #

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

    Does anyone else have any ideas?

  4. esmi
    Forum Moderator
    Posted 11 months ago #

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

  5. ronangelo
    Member
    Posted 11 months ago #

    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;
    }
  6. Lillybelle
    Member
    Posted 11 months ago #

    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.

  7. ronangelo
    Member
    Posted 11 months ago #

    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?

  8. Lillybelle
    Member
    Posted 11 months ago #

    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.

  9. esmi
    Forum Moderator
    Posted 11 months ago #

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

  10. Lillybelle
    Member
    Posted 11 months ago #

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

  11. esmi
    Forum Moderator
    Posted 11 months ago #

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

  12. Lillybelle
    Member
    Posted 11 months ago #

    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.

Reply

You must log in to post.

About this Topic