Submenu/mega-menu support?

[Correct-Syntax]

Hi, I was wondering if this nav-walker has support for sub-dropdowns and customized stuff like megamenu support?

I would like to accomplish something similar to: from https://bootstrap-menu.com/demos/megasubmenu.html

But I have only been able to get the single dropdown to work correctly. Specifically, when (in the wp customizer), a sub-link is added (see screenshot), the menu item disappears altogether.

This is the code I am using (in a custom wordpress theme):

  <nav class="navbar navbar-expand-md navbar-light py-3 bg-white">
    <div class="container-fluid col-12 col-md-11 py-2 py-md-0">
      <a class="navbar-brand" href="<?php echo get_option('home'); ?>">
        <?php
        // Get the uploaded logo image
        $custom_logo_id = get_theme_mod('custom_logo');
        $logo = wp_get_attachment_image_src($custom_logo_id, 'full');
        if (has_custom_logo()) {
          echo "<img class='logo' src='";
          echo $logo[0];
          echo "' alt=''>";
        } ?>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse d-md-flex justify-content-md-end" id="main-menu">
        <?php
        wp_nav_menu(array(
          'theme_location' => 'main-menu',
          'container' => false,
          'menu_class' => '',
          'fallback_cb' => '__return_false',
          'items_wrap' => '<ul id="%1$s" class="navbar-nav %2$s">%3$s</ul>',
          'depth' => 5,
          'walker' => new bootstrap_5_wp_nav_menu_walker()
        ));
        ?>
      </div>
    </div>
  </nav>

Sorry if I've overlooked something... and thanks for your time. :)

[AlexWebLab]

Hello there. This repository strictly follows the code/classes/structure of the official Bootstrap 5 release only. I will consider creating a megamenu version of it but it will be a completely new and different repository. By the way, that mega sub menu code is not really good in my opinion. I already found a bug: try to shrink the page from desktop to mobile and you will see that the submenu doesn't work anymore. Also, some javascript conditions are based on the window width integer and that is not a good practice because it's not cross-browser compatible.

[Correct-Syntax]

This repository strictly follows the code/classes/structure of the official Bootstrap 5 release only.

Yes, that makes sense to do so.

I will consider creating a megamenu version of it but it will be a completely new and different repository.

That would be nice. The official bootstrap themes have mega-menus, so it's a bit surprising that they aren't included in bootstrap. Then again, this is the first time I have even considered using a mega-menu for a project -as other solutions tend to be better... ;)

By the way, that mega sub menu code is not really good in my opinion. I already found a bug: try to shrink the page from desktop to mobile and you will see that the submenu doesn't work anymore. Also, some javascript conditions are based on the window width integer and that is not a good practice because it's not cross-browser compatible.

Yes, I noticed that and wasn't planning to use that code (it's bootstrap 4 anyway) but I did want to show an example of what I was trying to achieve.

Thanks!

[AlexWebLab]

I will consider creating a megamenu version of it but it will be a completely new and different repository.

That would be nice. The official bootstrap themes have mega-menus, so it's a bit surprising that they aren't included in bootstrap. Then again, this is the first time I have even considered using a mega-menu for a project -as other solutions tend to be better... ;)

Can you send me the link to an official bootstrap theme with a mega-menu? I'll take a look.

[Correct-Syntax]

Can you send me the link to an official bootstrap theme with a mega-menu? I'll take a look.

Sure. :)

https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/ would be one. Also https://themes.getbootstrap.com/product/space-multipurpose-responsive-template/ which has a different megamenu layout.