Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 8, 2015 at 3:56 pm #470351
    smudgedesign

    Hi there,

    I’ve added a few css classes to my menu items in appearance->menus
    and I want to add some custom CSS to the enfold area to change the colour of these items.
    So for example one menu item has a css class called education
    when the user hovers over this menu item, i’d like the colour of the background.

    I’ve also got a sub menu called Market Sectors, and this dropdown menu also has
    the 4 items listed below. Is it possible to have a different colour for each hover?

    Public #0b73a5
    Commercial #26a63c
    Health #ed751c
    Education #e7d200

    So is it possible to do this with Enfold?
    Im not having much luck with css such as

    .sub-menu li a:hover{
    color:#e7d200!important
    background-color:#e7d200!important;
    }

    Have you done this before?
    thanks
    Mick

    July 9, 2015 at 8:35 am #470654
    Rikard

    Hey smudgedesign!

    Each menu item has a unique id, it might be easier to target individual items that way:

    #menu-item-3566 .avia-menu-text {
color: red !important;
}

    Inspect the element you want to change to find its id.

    Regards,
    Rikard

    July 9, 2015 at 11:55 am #470750
    smudgedesign

    Hi Rikard

    Thank you, this works nicely for top level menu items, but is a bit buggy for dropdown menu items.
    Is there a way change the background colour (instead of the light grey) of sub menu items here. see here:
    https://www.evernote.com/l/AAupv0sdvRVHi6FTBzO7Sw0SZ6287MGc-qQ

    Kindest
    Mick

    July 9, 2015 at 2:06 pm #470855
    Basilis

    Hi!

    Please use the following for the normal state
    #top .header_color .main_menu .menu ul li { }
    and for the hover
    #top .header_color .main_menu .menu ul li > a:hover { }

    Let us know if you need anything else

    Best regards,
    Basilis

    July 9, 2015 at 2:22 pm #470870
    smudgedesign

    Great thank you

    And if anyone else is looking for a similar setup individual items can be targeted by a combination of the two

    #top .header_color .main_menu .menu ul #menu-item-158 > a:hover {
    background-color:#26a63c!important;
    color:white;
    }

    July 9, 2015 at 2:40 pm #470898
    Basilis

    Hey!

    Glad we have fixed it! Thx for using our theemes also.

    I have closed the ticket now!

    Cheers!
    Basilis

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Alternate colors for different menu / sub menu items’ is closed to new replies.