1. HOT Divi Ultimate Header Plugin - Design Divi custom header globally in Divi Builder: https://header.diviultimate.com/

Divi mega menu: menu items opened/collapsed by default

Discussion in 'Get Help On Divi Wordpress' started by Niklas, Aug 12, 2019 at 1:04 PM.

  1. Niklas

    Niklas New Member

    Hello everyone.
    I'm trying to have my menu items of a Divi mega menu (I have chosen a fullwidth menu in the Theme Customizer) opened by default. The following is the JavaScript code I've written but there is one little bug that I can't fix so that's because I'm asking for your help.

    HTML:
    <script>let btn = document.getElementsByClassName('to-scripts-btn')[0];
    btn.href = "javascript:void(0);";
    let sm = document.getElementsByClassName('sub-menu')[0];
    sm.style = "display: block;";
    sm.classList.add('et_pb_slide_dropdown_opened');
    let anchor = document.getElementsByClassName('mega-menu')[0].children[0];
    anchor.style.color = 'red';
    //the following two lines will throw an error
    document.getElementsByClassName('et_mobile_menu_arrow')[0].classList.add('et_pb_submenu_opened');
    anchor.children[0].classList.add('et_pb_submenu_opened');</script>
    upload_2019-8-12_21-54-45.png

    As you can see I've changed the color of the menu heading whose items should already be collapsed by default to red (also via JS - I know that it's also possible via CSS but it didn't seem to update so I did it with JS). My code is working fine but the icon (surrounded in the screenshot) should be the other way round, that's why it doesn't show up any items when closing the menu and opening it again:

    upload_2019-8-12_21-56-5.png

    It seems that I can't target the span (dropdown icon) since I get an error in the console:
    Code:
    Uncaught TypeError: Cannot read property 'classList' of undefined
    Both anchor.children[0] and document.getElementsByClassName('et_mobile_menu_arrow')[0] don't seem to work.

    upload_2019-8-12_22-3-52.png
     

    Attached Files:

  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Kindly share your URL.
     
  3. Niklas

    Niklas New Member

  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try this:
    Code:
    <script>
    jQuery(function($) {
        $(".mega-menu:eq(0) > a > span").addClass('et_pb_submenu_opened');
    });
    </script>