Skip to content

Instantly share code, notes, and snippets.

Last active May 2, 2019 09:09
  • Star 6 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Bootstrap 4 Megamenu dropdown
// Mega menu canvas
.dropdown--canvas {
// Reset margin and padding
.dropdown-menu {
left : auto;
padding : 0;
margin : 0;
// Default canvas width
.dropdown-menu {
width : 600px;
// Align the menu to the left
.dropdown--canvas--left .dropdown-menu {
right : 0;
// Set a smaller canvas size
.dropdown--canvas--sm .dropdown-menu {
width : 300px;
Copy link

Use it like this

<li class="nav-item dropdown dropdown--canvas dropdown--canvas--left dropdown--canvas--sm">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        Menu item
    <div class="dropdown-menu">

Classes dropdown--canvas--left and dropdown--canvas--sm are optional.

Copy link

foliwe commented Apr 22, 2017

Nice work. I have been playing with the .scss to archive a full-width dropdown menu but have not yet succeeded. So how can archive that

Copy link

.dropdown--canvas--left is not working. Because, Bootstrap dropdown.js is fixing the item to the left.

screen shot 2017-11-10 at 20 04 21

If you can use this,

.dropdown--canvas--left .dropdown-menu {
  right : 0;
  left: inherit !important;

You can use the following code to solve this problem.

Copy link

dambujo commented Jan 7, 2019

h iThanks for the mega dropdown menu is working so the hover is not working for that menu for others is working using bootstrap

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment