Bootstrap 4 Mega Full Width Dropdown Menu

access_time 7 months ago visibility2228 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

Want to publish your article on Kontext?

Learn more

Kontext Column

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


Learn more arrow_forward

More from Kontext

local_offer HTML

visibility 200
thumb_up 0
access_time 13 years ago

本文介绍如何修改input控件submit以及text不同类型的样式。

local_offer node.js local_offer Javascript

visibility 2372
thumb_up 1
access_time 9 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 ...

local_offer Javascript

visibility 21
thumb_up 0
access_time 2 years ago

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

About column

About Xml Xhtml Xslt Dhtml Css Javascript

rss_feed Subscribe RSS