WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Applying transparency to menus background without affecting the menu items (3 posts)

  1. MoonTech
    Member
    Posted 1 year ago #

    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

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

  3. MoonTech
    Member
    Posted 1 year ago #

    That worked perfectly.
    Thanks greatly Andrew.

Topic Closed

This topic has been closed to new replies.

About this Topic