Bootstrap 4 Mega Full Width Dropdown Menu

On Kontext, a full width mega dropdown menu is implemented using Bootstrap 4. If you'd like to implement similar menus, please follow these steps. 

Environment

The following code snippets work with Bootstrap 4.4.1. It should also work with other 4.x versions but I didn't test it. 

Create a CSS class for mega menu

The new CSS class will ensure the dropdown element has a width of 100%. I'm also removing top, left and right borders. 

.dropdown-menu-full {
    width: 100% !important;
    border-top: none;
    border-left: none;
    border-right: none;
    margin-top: -($spacer * .25 * 3);
}

Add position-static and mega menu class to dropdown elements

Add position-static to the nav item element (where dropdown class is applied). And then add dropdown-menu-full to the dropdown element with class dropdown-menu. 

<li class="nav-item pl-2 pl-sm-0 dropdown dropdown-hover position-static">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="/column">
        <i class="md md-24 d-inline d-sm-none">edit</i>
        <span class="pl-3 pl-sm-0">Columns</span>
        <span><i class="md md-24">expand_more</i></span>
    </a>
    <div class="dropdown-menu dropdown-menu-full" role="menu">
        <div class="container py-3">
            <div class="row w-100">
// Content of your mega menu
            </div>
        </div>
    </div>
</li>

Hover dropdown

If you'd like to show the dropdown menu automatically when mouse hover on the dropdown element, add the following JavaScript code to your head element.

// Mousehover for dropdown
    $('.dropdown.dropdown-hover').on('mouseover', function () {
        $('.dropdown-menu', this).show();
    }).on('mouseout', function (e) {
        if (!$(e.target).is('input')) {
            $('.dropdown-menu', this).hide();
        }
    });
    $('.dropdown-menu input').click(function (e) {
        e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
    });

And then append dropdown-hover class to your dropdown element.

Sample result

Once you follow these steps, you should be able to get a mega full width dropdown menu with Bootstrap.