1. CYBER MONDAY SALE All Access Pass @ $59 / Lifetime & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Close the slide after click outside of the slide

Discussion in 'Free Divi Community Forum' started by Mukšuš Mekkiš, May 20, 2025.

  1. Mukšuš Mekkiš

    Mukšuš Mekkiš New Member

    #1 Mukšuš Mekkiš, May 20, 2025
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add more varieties for your Divi header (12 premade styles) + menu hover effects:Learn More
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    #2 Divi.Help, May 20, 2025
  3. Mukšuš Mekkiš

    Mukšuš Mekkiš New Member

    #3 Mukšuš Mekkiš, May 20, 2025
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    #4 Divi.Help, May 20, 2025
  5. Mukšuš Mekkiš

    Mukšuš Mekkiš New Member

    Doesnt work :(
     
    #5 Mukšuš Mekkiš, May 20, 2025
    1. PRO MEMBER PERKS Custom Color Scheme + Premade Layouts - A perfect combination to boost productivity:Try Now
  6. Mukšuš Mekkiš

    Mukšuš Mekkiš New Member

    Only the hamburger icon closes, but not the menu itself
     
    #6 Mukšuš Mekkiš, May 20, 2025
  7. Divi.Help

    Divi.Help Administrator
    Staff Member

    I tested your site & when clicking outside the menu, it did close the menu.

    But when clicking menu item, it didn't close it. To fix that, try to add the below code as well:
    Code:
    Log In or Sign Up to view this code.
     
    #7 Divi.Help, May 21, 2025
    1. PRO MEMBER PERKS Divi Mini Cart Pro Plugin - Instantly add 3 different types of mini cart to your Divi site:Learn More
  8. Mukšuš Mekkiš

    Mukšuš Mekkiš New Member

    Thanks, it helped me, but now I have an another problem.

    In my menu the row link when the opacity is 0 its clickeable, even if I didnt set any link in the settings.

    I tried to put this code:

    pointer-events: none;
    cursor: default;

    But in this case, the entire menu becomes inactive, even the buttons in it that are linked to.
     
    #8 Mukšuš Mekkiš, May 21, 2025
  9. Divi.Help

    Divi.Help Administrator
    Staff Member

    Not sure what you meant.
     
    #9 Divi.Help, May 21, 2025
    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins:View Demo
  10. Mukšuš Mekkiš

    Mukšuš Mekkiš New Member

    Perhaps I didn't formulate my problem correctly and besides, I tried to solve it myself by rewriting the code almost completely. You were probably checking my website at that moment. Since nothing worked for me, I rolled back the settings.
    The problem is that I noticed that the menu is active even when closed, i.e. it is essentially just invisible and paralyzes part of the screen on the left. After searching a bit, I found out that this problem is related to the opacity settings.
     
    #10 Mukšuš Mekkiš, May 22, 2025
  11. Mukšuš Mekkiš

    Mukšuš Mekkiš New Member

    Okay, the problem was solved by using visibility: hidden instead of opacity: 0, but now the slide effect has disappeared when opening the menu. Is it possibletoreturnitsomehow?
     
    #11 Mukšuš Mekkiš, May 22, 2025
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  12. Mukšuš Mekkiš

    Mukšuš Mekkiš New Member

    Okay, I fixed it. Thanks
     
    #12 Mukšuš Mekkiš, May 22, 2025
  13. Roxanne44

    Roxanne44 New Member

    Hi, I am having the same issue as the original post above - I followed the same Divi tutorial to create a slide in menu but need it to close when I click outside the menu, not just when I click the close(x) icon.

    I tried the code snippets supplied in the <body> section, both of them, but it didn't work. The (x) will convert back to hamburger but the slide-in doesn't retract. Does the code need to be altered for my specific site or should it work for all?

    The menu is on this page here - https://rdconsulting.com.au/new-home-draft/

    Appreciate any insights.
    Cheers
    Roxanne
     
    #13 Roxanne44, Nov 25, 2025
    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members:View Demo
  14. Roxanne44

    Roxanne44 New Member

    In case this is helpful for anyone else with the same issue - Elegant Themes came through with a fix for this -

    Please edit the Code Module from the template and replace this JavaScript code: (see screenshot)

    With this one:



    <script>
    jQuery(function($){
    $('#slide-in-open').click(function(){
    $(this).toggleClass('open');
    $('.slide-in-menu-container').toggleClass('slide-in-menu');
    });
    $(document).on('click', function(e) {
    if ($('.et-l.et-l--header .slide-in-menu-container').hasClass('slide-in-menu')) {
    if (!$(e.target).closest('.et-l.et-l--header .slide-in-menu-container').length && !$(e.target).closest('#slide-in-open').length) {
    $("#slide-in-open").toggleClass('open');
    $('.slide-in-menu-container').toggleClass('slide-in-menu');
    }
    }
    });
    });
    </script>


    Worked a treat for me.
     

    Attached Files:

    #14 Roxanne44, Dec 1, 2025
(You must log in or sign up to post here.)