Bootstrap 4 Mega Full Width Dropdown Menu
access_time 2 years ago languageEnglish
more_vert

Bootstrap 4 Mega Full Width Dropdown Menu

visibility 4,861 comment 0

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.


copyright This page is subject to Site terms.
Like this article?
Share on

Please log in or register to comment.

account_circle Log in person_add Register

Log in with external accounts

Follow Kontext

Get our latest updates on LinkedIn.

Want to contribute on Kontext to help others?

Learn more

More from Kontext

visibility 88
thumb_up 0
access_time 6 months ago
visibility 27
thumb_up 0
access_time 3 years ago