Add opacity between menu and background

Asked

Viewed 181 times

1

I have a side header and when it is displayed I need the plan behind it to have an opacity, I have tried several ways I found on the internet, but none worked out if any can help me I will be grateful follow the css and an image.

Imagery

inserir a descrição da imagem aqui

.header {
    background-image: linear-gradient(to top, #efefef, #ffffff);
    box-shadow: -0.8px 0.6px 6px 0 rgba(0, 0, 0, 0.15);
    height: 70px;
    width: 100% !important;
    mix-blend-mode: undefined;
    background-image: linear-gradient(to top, #efefef, #ffffff);
    box-shadow: -0.8px 0.6px 6px 0 rgba(0, 0, 0, 0.15);
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.71;
    letter-spacing: normal;
    text-align: left;
    color: #666666 !important;
    li {
        list-style: none;
    }
    ul {
        padding-left: 60px;
    }
    .nav>li.active a,
    .nav>li>a:active {
        border-bottom: solid #66bbb0;
        border-width: 4px;
        color: #66bbb0 !important;
        background-color: inherit;
        text-decoration: none;
    }
    li {
        line-height: 70px;
        height: 70px;
        a {
            padding: 0 10px;
            line-height: 70px;
            height: 70px;
            display: inline-block;
            color: #666666;
        }
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .nav>li>a:hover {
        text-decoration: none !important;
        background-color: #e6e6e6 !important;
        color: #666666 !important;
    }
    #language {
        width: 80px;
        ul {
            padding: 0;
            min-width: 80px;
        }
        a {
            text-decoration: none;
            img {
                width: 30px;
                height: 30px;
                margin-right: 10px;
            }
        }
    }
    .dropdown {
        position: relative;
    }   

    @media screen and (max-width: 650px){

        .navbar-toggle{
            z-index: 999;            
        }
        .collapse{
            top: 0;
            right:-100%;
            display: block !important;
        }
        .in.collapse{
            top: 0;
            right: 0;
        }

        .lateral {
            height: 100% !important;
            width: 87%;
            position: fixed;
            z-index: 1;         
            background-color: #fff;
            overflow-x: hidden;
            -webkit-transition: all .5s linear; 
               -moz-transition: all .5s linear; 
                 -ms-transition:all .5s linear; 
                 -o-transition: all .5s linear;   
                    transition: all .5s linear;      
        } 


    }    
}
css html5

  • Ana take advantage and put the HTML, only with CSS becomes complicated to make sure if the answer will work for you or not

  • I can’t because it’s too big. I glue and it won’t all code.

  • Ana put only the part of HTML involved in the question, at least a simple example that for us to simulate your problem and give you an accurate answer.

  • Without all your code it is hard to say. Because you can’t tell if your header is occupying width: 100% of the page or based on a parent element. If it is occupying width: 100% of the page. Just add a background: rgba(0,0,0,0,3); in your header class. if it is not filling 100% of the page, first have to check if any parent element is this, and if it is, add the background: rgba(0,0,0,0,3); on it. Otherwise you will need to create a Dive that fills the entire page and use z-index to position it behind your header.

  • Ana, send via https://jsfiddle.net

1 answer

1

From what I understand, you are making a dropdown menu and you want to put an opacity off the menu when you open it. Correct?

If this is it, you can use the .active, add it to your file .css:

header.active {
    box-shadow: [ . . . ] rgba(cor,cor,cor, opacidade);
}

Using the .active you will activate the box-shadow only after the menu is active/open!

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.