I recently embarked on a project that involved using Bootstrap 4.4,
The project is an eCommerce grocery store with departments comprising categories and subcategories. The main menu became very lengthy when using the default code, so I encountered some alignment issues.
If you want to see how the dropdown looks currently, please refer to this image.
To make improvements, I decided that all submenu items should align with the top of their parent menus. If you are wondering about what I aim to achieve, take a look at this example image.
Furthermore, on mobile devices, the menu is hidden at the bottom of the screen.
The provided jQuery code snippet addresses the issue by adjusting the behavior of the dropdown menus for improved alignment and functionality. Additionally, the CSS snippet customizes the appearance of the dropdowns to ensure a cohesive design within the project.
Thank you for your attention!