Mobile overlay: nested menu should collapse by default

  • Resolved Huan

    (@daodaotw)


    1 year ago

    Hi,

    Below is align-items: flex-start; version of the mobile overlay menu:

    .has-child item(s) should be collapsed by default, or given options to choose.

    Each .has-child item should have a button (marked in green), typically an arrow icon, which can be the same one the normal menu has.

    Making it an “accordion” with CSS and JS seems straightforward, but I almost gave up trying. Any guide or code snippet is appreciated. (I use a child theme for custom CSS and JS).

    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator jordesign

    (@jordesign)

    Hey @daodaotw – good call out. And you’re not the first one to mention it ??
    Good news is that there’s an issue where that is reported and being discussed within Github (which the developers use to track work).

    https://github.com/WordPress/gutenberg/issues/38599

    Thread Starter Huan

    (@daodaotw)

    Thank you @jordesign. This malfunctioned mobile menu can be a dealbreaker of using block theme, at least for me. Hopefully this will be resolved soon.

    Paresh Sojitra

    (@pareshsojitra)

    I just fixed this doing some tweak. if anyone looking for this. without blocking main menu link.

    I can also share if anyone still looking to this.

    I have done this in latest WordPress Theme.

    image

    CSS:
    @media (max-width:599px) { header .wp-block-navigation .wp-block-navigation-item { justify-content: center; } header .wp-block-navigation ul li { width: 100%; } header .wp-block-navigation .wp-block-navigation__submenu-icon { height: auto; width: auto; position: absolute; border: 1px solid #ccc; padding: 3px; right: 0; top: 4px; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { display: none; width: 100%; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon { display: block; } }

    jQuery:
    /* + Document On Ready */ $(document).on("ready", function() { $(".wp-block-navigation-submenu__toggle").on("click", function() { var li = $(this).parent(); if ( li.hasClass("ddl-active") || li.find(".ddl-active").length !== 0 || li.find(".wp-block-navigation-submenu").is(":visible") ) { li.removeClass("ddl-active"); li.children().find(".ddl-active").removeClass("ddl-active"); li.children(".wp-block-navigation-submenu").slideUp(); } else { li.addClass("ddl-active"); li.children(".wp-block-navigation-submenu").slideDown(); } }); });

    Paresh Sojitra

    (@pareshsojitra)

    Here is how it works without any issue. I hop this considered to be added in WordPress Core ? Anyone can do this how.

    https://github.com/WordPress/gutenberg/assets/5764334/70dd7688-dd1c-48da-bf6a-26857683690a

    Thread Starter Huan

    (@daodaotw)

    Thanks @pareshsojitra, I’m 100% confident that this will be added to core, it’s a matter of time, although it can take months or years…

    I am looking for solution to this too @pareshsojitra but I can’t get the jquery to work, I get a critical error upon saving it to my functions.php. I am not an experienced developer, am I missing something obvious?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Mobile overlay: nested menu should collapse by default’ is closed to new replies.