In Bootstrap 4, I've created a "mega menu" within the navbar that uses the fixed-top class to always stay on screen. The menu has a child div with the class container for centering its contents.
To create the mega menu, I've used the following CSS classes:
.megamenu-li {
position: static;
}
.megamenu {
position: absolute;
width: 100%;
left: 0;
right: 0;
padding: 15px;
}
The issue is that when the mega menu opens, its content expands beyond the window width as shown here:
I have tried adjusting the megamenu class to control the width and alignment within the menu, but it does not align properly with the container class. You can view my attempted solution in this fiddle:
I also created a demo where the mega menu stays within the bootstrap container, but it still has some issues like the navbar background not expanding correctly and the navbar not being fixed. Here's the link to that demo:
If anyone has suggestions on how to achieve the desired effect or improvements on my current attempts, I would really appreciate the help. Thank you!