Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 23, 2018 at 2:04 pm #931967
    itransact

    Hi,
    is it possible to make gaussian blur effect on fullscreen burger menu, which would cover all content behind the menu items on lets say rgba (0,0,0,0.9) ?
    I was trying to :

    .av-burger-overlay-bg {
 background-color: rgba (0,0,0,0.9);
 filter: blur(10px);
}

    but doesn’t work.

    Any ideas?
    Thanks in advance.
    Cheers,

    • This topic was modified 6 years, 8 months ago by itransact.
    March 23, 2018 at 3:12 pm #931991
    Vinay

    Hey itransact,

    The blur filter will blur the elements inside the container to which you apply. If you apply it to the overlay which is “av-burger-menu-ul” it will blur the menu elements.

    If you are looking to blur the background when the navigation opens it requires custom js.

    Add this code to the Quick CSS section under Enfold > General Styling 

    .blurMe{
  -webkit-filter: blur(4px);
          filter: blur(4px);
}

    Add this at the very end of your themes / child theme’s functions.php file:

    

function avia_custom_blurry(){
?>
 <script>
jQuery('.av-hamburger').on('click', function () {
    jQuery("#main").toggleClass('blurMe');
jQuery("#main, .logo").toggleClass('blurMe');
});
 </script>
<?php
}
add_action('wp_footer', 'avia_custom_blurry');

    Best regards,
    Vinay

    August 3, 2018 at 9:34 pm #993359
    itransact

    Thank you

    August 4, 2018 at 7:58 am #993440
    Rikard

    Hi,

    Glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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