Skip to content

Instantly share code, notes, and snippets.

@IsraelOrtuno
Last active May 2, 2019 09:09
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save IsraelOrtuno/83d51eabd0b33517a24f07647e31f8be to your computer and use it in GitHub Desktop.
Save IsraelOrtuno/83d51eabd0b33517a24f07647e31f8be to your computer and use it in GitHub Desktop.
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;
}
@berkanakyurek
Copy link

Hi,
.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.

@dambujo
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