Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 30, 2015 at 3:02 pm #544507
    AnnemarieDoolin

    Hi Genius’

    I’ve been wracking my brains on this one but I’ve tried all ways with Firebug to change a dropdown menu background to opacity 0.2 (or even transparent) but keep the text at opacity 1. If I use the following css it changes both background and text to opacity 0.3…

    ul.sub-menu {
    opacity: 0.3 !important;
    }
    Can you help me please, please, please?

    November 30, 2015 at 5:29 pm #544639
    Elliott

    Hi Annemarie!

    Try setting a transparent background instead.

    ul.sub-menu { background: rgba(255,255,255,0.3) !important; }

    But you may need to set it on the list items or links instead of the sub menu background. Send us a link to your page and we’ll take a look.

    Best regards,
    Elliott

    November 30, 2015 at 8:20 pm #544783
    AnnemarieDoolin

    Sadly that didn’t work either so I reverted it back to ..

    ul.sub-menu {
    opacity: 0.7 !important;
    }

    I’d like to use it on many of our sites, but a current one that I am testing it on where you can see how it behaves is DogWhisperer.dk

    Thanks!

    November 30, 2015 at 9:58 pm #544824
    Elliott

    Hey!

    This should work.

    #top .sub-menu {
    background: rgba(255,255,255,0.3) !important;
}
.sub-menu, .sub-menu * { background: transparent !important; }

    Cheers!
    Elliott

    November 30, 2015 at 10:24 pm #544841
    AnnemarieDoolin

    SUPERB. Looks lovely, thank you so much.

    December 1, 2015 at 1:24 pm #545130
    Rikard

    Hi,

    Glad we could help :-)

    Best regards,
    Rikard

    March 31, 2016 at 9:08 am #605720
    millertimesites

    I tried this solution to change the Full Width Sub Menu background and text color along with font size which all worked, but hover does not. It changed the background color of the entire drop down container instead of each item independently.

    My current CSS:

    
#top .sub-menu { font-size: 17px;
    background: #1684b0 !important;
}
.sub-menu, .sub-menu * { background: transparent !important; }

#top .sub-menu:hover {
    background: #2e2e2e !important;

    Thanks
    Jon

    March 31, 2016 at 10:14 am #605749
    Vinay

    Hey!

    The code you are using is for the main menu and also the code block is not closed correctly so it may be causing issues. please remove it and use the below code to change the full width menu background color 

    /* background color */
.av-submenu-container {
    background-color: gold!important;
}

    Cheers!
    Vinay

    March 31, 2016 at 10:33 am #605763
    millertimesites

    Vinay,

    Thanks for the reply and for noticing that I was missing an }, but unfortunately hat didn’t fix issue.

    Here are my test pages as an example http://9ea.702.myftpupload.com/
    The background color and hover are correct on the top level of the Full Width Sub Menu, however, it is the hover background on the drop down items under “Common Questions” that isn’t working. The entire container changes when you hover over an item instead of only the background color of each item as you hover.

    Thanks
    Jon

    March 31, 2016 at 1:35 pm #605873
    Vinay

    Hey!

    This CSS rule mentioned below is causing the issue

    
#top .sub-menu:hover {
    background: #2e2e2e !important;
}

    Change it to

    #top .sub-menu li:hover {
    background: #2e2e2e !important;
}

    If you cannot find it just add the below code in Enfold > General Styling > Quick CSS

    
#top .sub-menu:hover {
    background: transparent !important;
}
#top .sub-menu li:hover {
    background: #2e2e2e !important;
}

    Best regards,
    Vinay

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.