Dropdown Menu transparent —> 100% opacity

  • Resolved silverthread

    (@silverthread)


    1 year, 2 months ago

    I have a dropdown menu item (Raw Tapes) that has transparency on the background for the drop-down. This makes it hard to read. I wan the dropdown to be 100% opacity, but no matter what I try, it remains transparent. I’m clearly styling the wrong class, etc.

    Can you please suggest the custom CSS I should add to make the drop-down opaque? I also created a two-column layout for the drop-down, which works pretty well, but there may be a better way to do it? If so, please let me know about that as well. But for now, it works. (I don’t like that I had to set a -34px top margin on the float: right column of menu items, because they would stagger without it. Am I doing something wrong with my clear:both?

    Here’s the CSS I’ve tried so far… just so you can see what’s not working:

    @media (min-width: 992px) {
    /* Add columns to Drop-Down Raw Tapes */
    .sub-menu-columns ul.sub-menu {
    display: inline-block;
    width: 520px !important;
    margin: 0px !important;
    padding: 0px !important;
    box-shadow: 4px 4px 10px black;
    background: rgba(255,255,255,1.0) !important;
    opacity: 1 !important;
    }

.sub-menu-columns ul.sub-menu li.menu-item:nth-child(odd) {
    float: left !important;
    margin: 0px !important;
    padding: 0px !important;
    width: 260px !important;
    clear: both !important;
    background: rgba(255,255,255,1.0) !important;
    opacity: 1 !important;
    }
    .sub-menu-columns ul.sub-menu li.menu-item:nth-child(even) {
    float: right !important;
    width: 260px !important;
    margin: -34px 0px 0px 0px !important;
    padding: 0px !important;
    clear: both !important;
    background: rgba(255,255,255,1.0) !important;
    opacity: 1 !important;
    }
    }

    Thank you for your time and talent, and your willingness to share with others.

    Cheers,
    Matt

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter silverthread

    (@silverthread)

    I have discovered that my problem is being caused by this bit of CSS, which I used to make the header semi-transparent: 

    header#site-header {
background: #fff;
opacity: 0.8;
z-index: 999 !important;
}

    If I set it back to completely opaque, my dropdown menu is now opaque also. But I’d really like to have the dropdown solid, and the header semi-trans. Is there a good way around this? Nothing else seems to work.

    Theme Author Ben Sibley

    (@bensibley)

    Hi there,

    To make this customization, please remove your other code snippet and then add the following CSS:

    #site-header {
  background: rgba(255,255,255,0.5);
}

    The issue with changing the opacity property is that it also makes all the text and “child” elements semi-transparent. With the code above, you will only make the background of the header semi-transparent.

    Thread Starter silverthread

    (@silverthread)

    THANK YOU!!! That resolved my issue completely.

    I appreciate you greatly.

    Matt

    • This reply was modified 1 year, 2 months ago by silverthread.
    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome! Stay in touch if you need anything else and I’ll be happy to help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Dropdown Menu transparent —> 100% opacity’ is closed to new replies.