Nav menu widget settings additions with proposed solutions

[alienspirit]

Describe the Problem

I've encountered that currently nav menu widget is missing several functions:

1. Ability to close Menu on menu item click

2. Padding on the sides of each menu item, for more aesthetic look.

3. Link attached to the button limited to text box

I've created work around solutions proposed below, this will help others for now and hopefully changes will be added into core functionality.

Propose a Solution

1. Achieved with Javascript added through custom code to body of the page

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Select the main wrapper for your menu
    const menuWrapper = document.querySelector('.e-n-menu');

    // Only proceed if the menu exists on the page
    if (menuWrapper) {
        // Find the toggle button (the hamburger icon)
        const menuToggle = document.querySelector('.e-n-menu-toggle');

        // Find all the clickable menu items within that menu
        const menuItems = menuWrapper.querySelectorAll('.e-n-menu-item a');

        // Check if the toggle and items exist
        if (menuToggle && menuItems.length) {
            menuItems.forEach(function(item) {
                item.addEventListener('click', function() {
                    // Check if the menu is open (aria-expanded="true" means it's open)
                    if (menuToggle.getAttribute('aria-expanded') === 'true') {
                        // Programmatically click the toggle button to close it
                        menuToggle.click();
                    }
                });
            });
        }
    }
});
</script>

2 and 3 achieved with custom CSS added to the menu widget:

@media (max-width: 1024px) {
    /* Adds horizontal space to the dropdown menu items */
selector .e-n-menu-item {
    padding-left: 15px;
    padding-right: 15px;
    }
selector .e-n-menu-title-container {
    /* --- Layout and Centering --- */
    display: flex;
    justify-content: center;
    align-items: center;
    /* --- Sizing and Spacing --- */
    width: 100%;
    padding: 10px 20px;    /* Optional: Adds extra clickable space inside the button */
    box-sizing: border-box;
  }
}

Additional Context

No response

Agreement

• I confirm I have read and followed all the guidelines and instructions outlined in the Feature Request form.
• I agree that my discussion may be closed without further action if it doesn't meet all the requirements outlined in the Feature Request form.