I'm working on implementing a full-width mega menu with Bootstrap 4:
Here is the CSS code I have so far:
.menu-large {
position: static !important;
}
.megamenu {
padding: 20px 20px;
width: 100%;
}
.megamenu > div > li > ul {
padding: 0;
margin: 0;
}
...
After adding container
and row
to the ul
element to display 4 columns, I included col-md-3
in the row
, but it doesn't seem to work properly as I see an empty container.
Below is the HTML structure I have:
<div class="fixed-top navbar navbar-light bg-light navbar-expand-md justify-content-center">
...
</div>
My issue is illustrated in the following image:
https://i.sstatic.net/7gmpM.png
You can view the demo here.
Any suggestions on how I can address this problem?