Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 16, 2016 at 3:54 pm #598977
    DGC

    Hello,

    I’ve managed it to change the opacity of the main content when the mobile_menu is showed. (example in private content)
    But I want to have a dark opacity over the whole page. So a background color. But this is not working

    This is the code I have:

    .show_mobile_menu #main {
	opacity: 0.4
        background-color: #303030;
}

    Note: the opacity works, the background color doesn’t.
    So how can I have a “dark” opacity over the whole page when the mobile menu is active?

    Thanks in advance!

    March 17, 2016 at 6:30 am #599449
    Rikard

    Hey De Groot,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Thanks,
    Rikard

    March 17, 2016 at 11:01 am #599519
    DGC

    I’ve put it in the private content.

    March 17, 2016 at 11:51 am #599537
    Vinay

    Hi!

    The CSS you are using will change the opacity but cannot change the background color as the main content and elements inside it has it’s own bg colors. Remove the CSS and try this instead..

    
/* Content Overlay*/
.show_mobile_menu:after {
  content: "";
  display: block;
  position: fixed; /* could also be absolute */ 
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.85);
}

    It should look something like this

    Best regards,
    Vinay Kashyap

    March 17, 2016 at 11:58 am #599540
    DGC

    Great answer, exactly what I want.
    Thank you very much!

    March 17, 2016 at 5:42 pm #599803
    Vinay

    Hey!

    You are most welcome! we really appreciate if you rate our theme on themeforest :)
    Please feel free to get in touch with us if you have any questions.

    Thank you for using Enfold :)

    Best regards,
    Vinay Kashyap

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