1. BLACK FRIDAY SALE Get 85% OFF Pro membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Solved Custom menu not working everytime

Discussion in 'Free Divi Community Forum' started by Kaia, Nov 19, 2023.

  1. Kaia

    Kaia New Member

    Hi fellow Divians :)

    I have an issue with my custom Divi menu. It works, but not every time. I think it might be a loading problem; however, I'm not sure.

    The issue occurs sometimes on both mobile and desktop when the menu opens the test-sub-menu-container or sometime only direct to parent link (should not have default functionality). Sometimes, the parent links (to trigger the menu) are not treated with preventDefault.

    Does anybody have a clue? All plugins are deactivated.

    NB: Integration throught Divi's own integrate -> script. Has also been done.


    $(document).ready(function() {
        var $mobileMenuButton = $("#test-mobile-menu-button");
        var $mobileMenu = $("#test-mobile-menu");
        var $mainMenu = $("#test-menu");
        $mobileMenuButton.on("click", function(event) {
            console.log("Mobil menu klik");
        $(document).on("click", function(event) {
            console.log("klik main");
            if (!$(event.target).closest('#test-menu').length && !$(event.target).closest('#test-mobile-menu-button').length) {
                console.log("Luk menuer");
        $mainMenu.on("click", ".trigger-test-sub-menu-container", function(event) {
            console.log("Main Menu - Desktop ");
        $mobileMenu.on("click", ".trigger-test-sub-menu-container > a", function(event) {
            var $subMenu = $(this).closest(".trigger-test-sub-menu-container").find(".test-sub-menu-container");
        function toggleMenu($menu) {
            if ($menu.is(":visible")) {
                console.log("Luk sub-menu");
            } else {
                console.log("Sub-menu aaben");
        function closeMenus() {
            console.log("Luk menuer");

    Enqueue function:

    function enqueue_test_menu_scripts() {
        // Enqueue jQuery
        // Enqueue menu script
            wp_enqueue_script('test-menu-mobile-js', get_template_directory_uri() . '/js/test-menu-mobile.js', array('jquery'), null, true, 0);
    add_action('wp_enqueue_scripts', 'enqueue_test_menu_scripts');
    #1 Kaia, Nov 19, 2023
    Last edited: Nov 19, 2023
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom footer designs for you to choose from:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
  3. Kaia

    Kaia New Member

    Hi Admin,

    I apologize for the overly vague question. I have already found a solution:

    To trigger any child elements via "menu-item-has-children," I created a custom "walker" to convert all "menu-item-has-children" from <a> to <button> and then restyled the button to have the same styles as <a>.

    This also has the benefit of having a better control on mobile devices (in my opinion).

    Thanks for the great forum!
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo