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.


* This page is subject to Site terms.

More from Kontext

local_offer node.js local_offer Javascript

visibility 406
thumb_up 1
access_time 3 months ago

After upgrading Visual Studio to 16.5.1, I encountered the following error in Task Runner Explorer: ***\Kontext.Web.Portals\node_modules\node-sass\lib\binding.js:15 throw new Error(errors.missingBinary()); ^ Error: Missing binding ***\Kontext.Web....

open_in_new View open_in_new Frontend & Javascript

local_offer Javascript

visibility 12
thumb_up 0
access_time 7 months ago

JSON is commonly used in modern applications for data storage and transfers. Pretty much all programming languages provide APIs to parse JSON. 

open_in_new View open_in_new Code snippets

local_offer dotnetcore local_offer bootstrap

visibility 1986
thumb_up 0
access_time 3 years ago

Background When upgrading Bootstrap to v4.0.0 release, the bundler and minifier doesn’t work properly due to CSS variable is commonly used: :root{--blue:#007bff; About 26 errors will show up in the Error List with the following message: ...

open_in_new View open_in_new ASP.NET Core

local_offer Javascript

visibility 399
thumb_up 0
access_time 11 years ago

前几天帮一个学弟写的,JavaScript版本的杨辉三角,其实和其他C、Java等等版本的都差不多。代码如下:

open_in_new View open_in_new Frontend & Javascript

info About author

Dark theme mode

Dark theme mode is available on Kontext.

Learn more arrow_forward

Kontext Column

Created for everyone to publish data, programming and cloud related articles. Follow three steps to create your columns.


Learn more arrow_forward