Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 24, 2016 at 7:59 pm #637715
    dialedinmarketing

    Hi Kriesi Team,

    I was wondering if there was a piece of code that you could inject to dim the entire screen when you are hovering on the main menu items. That way the user is able to concentrate more on the menu the rest of the page. Sort of like the lightbox effect for images but only when you are hovering over the main menu. I am using a leftside bar setting similar to the Photography Demo.

    Many thanks,
    DI

    May 24, 2016 at 10:42 pm #637775
    Basilis

    Hi dialedinmarketing!

    can you please show us an example of what you mena?
    Would be really easier for us to understand evaluate and provide you a solution.

    Thanks a lot for your understanding

    Regards,
    Basilis

    May 24, 2016 at 10:57 pm #637787
    dialedinmarketing

    Hi Basilis,

    Here is an example to what I’m referring to. When you hover over the menu items you will notice that the main content to the right side of the menu darkens. I’m hoping to achieve that effect within Enfold without having the purchase that plugin since Enfold already has a left sidebar menu option similar to that demo.

    Thanks,
    DI

    May 25, 2016 at 6:44 pm #638202
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #header:hover + #main {
    opacity: 0.2;
}

    Best regards,
    Yigit

    May 25, 2016 at 9:39 pm #638295
    dialedinmarketing

    Yigit,

    That’s very close to what I’m looking for. Thanks. Now whenever I hover of the header the screen darkens. Is it possible to only have the effect occur when you hover over the menu and have it transition or fade in the same way as the menu. I’ve included my login details below.

    May 26, 2016 at 5:45 am #638464
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #header:hover + #main {
    opacity: 0.2;
    transition: all .5s linear 0;
    }

    Best regards,
    Vinay

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