Support » Themes and Templates » Applying transparency to menus background without affecting the menu items

  • Resolved MoonTech

    (@moontech)


    Hi guys. I’m new to wordpress and themes customization and I’m looking forward to be a contributing member in the future.

    I’m facing a hard time figuring the code needed to add transparency to a menus background but without affecting the menu items itself (the text transparency).

    I’m running an “Off line” plugin since the site I’m working on is a user active, but bellow is the code excerpt in my Style CSS that governs that specific menu behavior ..

    /* Menu Secondary
    ----------------------------*/
    
    .menu-secondary-container {
        position:relative;
        opacity: 0.5;
        filter:alpha(opacity=50); /* For IE8 and earlier */
        height: 38px;
        z-index: 300;
        background: url(images/menu-secondary-bg.png) left top repeat-x;
        background-style: opacity=0.5;
        margin-top: 15px
    }
    
    .menu-secondary {}
    
    .menu-secondary ul {
        min-width: 160px;
    }
    
    /* First Level - Menu Secondary */
    .menu-secondary li a {
        color: #ffffff !important;
        padding: 13px 15px 12px 15px;
    	text-decoration: none;
        font-family: 'Oswald', sans-serif;
        font-size: 14px;
        text-transform: uppercase;
        font-weight: bold;
        text-shadow: 0 1px 0 #000000;
    }

    I’d highly appreciate any help, thanks in advance

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Don’t use CSS opacity, use a translucent background image with the opacity you want. Apply that background image to .menu-secondary-container.

    Thread Starter MoonTech

    (@moontech)

    That worked perfectly.
    Thanks greatly Andrew.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Applying transparency to menus background without affecting the menu items’ is closed to new replies.