Bootstrap 4 Megamenu dropdown

dropdown-megamenu.scss

// 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;
}

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

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

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.