Ecommerce Shopify WordPress Discussion

Dropdown Toggle Split in Bootstrap Navwalker WordPress

It's about Wordpress Theme Development. When working on a WordPress theme using Bootstrap 5, I used Bootstrap NavWalker to create a navigation bar (navbar). The dropdown feature is already built into Bootstrap NavWalker, including the dropdown arrow integrated into the menu. Now, I want to customize it a bit. I want the text in the menu to take the user to a link when clicked. However, when the user clicks on the dropdown arrow, I want it to reveal the submenu instead. In summary, I want the user to navigate to a link by clicking on the menu text, and show the submenu when the dropdown arrow is clicked. Is it possible to do that? here is my code: header.php: <div class="col-12"> <nav class="main-menu navbar navbar-expand-md navbar-light bg-light"> <button class="navbar-toggler ms-auto mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <?php wp_nav_menu(array( 'theme_location' => 'kreasi_main_menu', 'depth' => 4, 'container' => false, 'menu_class' => 'navbar-nav me-auto mb-2 mb-lg-0', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker(), )); ?> </div> </nav> </div> this is my script-navbar.js, i'm using node.js: import $ from 'jquery'; class scriptNavbar { constructor() { this.events(); } events() { $(document).ready(() => { // Toggle dropdown-menu on click $('.main-menu .dropdown > a').on('click', function (e) { e.preventDefault(); // Close other dropdown-menus within the same level $(this).parent().siblings('.dropdown.show').removeClass('show'); // Toggle class for the clicked dropdown-menu $(this).next('.dropdown-menu').toggleClass('show'); }); // Close dropdown-menus when clicking outside of them $(document).on('click', function (e) { if (!$(e.target).closest('.main-menu .dropdown').length) { $('.main-menu .dropdown .dropdown-menu').removeClass('show'); } }); // Prevent closing the dropdown-menu when clicking inside it $('.main-menu .dropdown-menu').on('click', function (e) { e.stopPropagation(); }); }); } } export default scriptNavbar; And this is my style-navbar.scss: /* Default styles */ .main-menu { padding: 0; } .main-menu ul { padding: 0; margin: 0; font-size: 18px; font-weight: 500; border-radius: 0; } .main-menu ul li { display: inline; margin: 0 5px 0 0; } .main-menu ul li:last-child { margin: 0; } .main-menu > ul li a, .navbar-light .navbar-nav .nav-link { color: #303030; text-decoration: none; padding: 7px 15px 20px; } .main-menu ul li a.nav-link:first-child { padding-left: 0 !important; } .main-menu ul li ul { background-color: #000; } .main-menu ul li ul li { margin: 0; } .main-menu ul li ul li a { padding: 0.5rem; color: #fff; } .main-menu .navbar-nav .active > .nav-link { color: #CA2424; } .main-menu .dropdown-item:focus, .main-menu .dropdown-item:hover { color: #fff; background-color: #272c33; } .main-menu .dropdown-item.active, .main-menu .dropdown-item:active { background-color: #d2335b; } .main-menu .navbar-toggler { border: none; padding-right: 3%; } .main-menu .dropdown-toggle::after { vertical-align: 0.155em; } .main-menu ul li .dropdown-menu .dropdown > a::after { display: inline-block; margin-left: 0.355em; vertical-align: 0.2em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); } .main-menu .dropdown-menu li { display: block; } .main-menu .dropdown-menu .dropdown-menu { top: -1px; left: 100%; } .navbar-brand { display: contents; } /* Responsive styles */ @media (max-width: 767px) { .main-menu { border-top: 2px solid #f2f2f2; padding: 2%; margin-top: 2%; } /* Add background color to third-level submenu */ .main-menu .dropdown-menu ul li { margin-left: 8%; position: relative; padding-left: 8%; } .main-menu .dropdown-menu ul li::before { font-family: "dashicons"; content: "\f474"; position: absolute; transform: scaleX(-1); font-size: larger; color: #fff; margin: 5px 3%; left: -8%; } } If you want to look my theme folder where every my code exist, you can check my github here: https://github.com/achann08/wc_course/tree/main/wp-content/themes/kreasi I need help, thank you very much. To dropdown toggle split in Bootstrap Navwalker.
TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.