1. Overview
  2. Code Library
  3. Creating a Mega Menu using the native menu

Creating a Mega Menu using the native menu

Mega Menu's on desktop sites are quite popular, but until we get the native functionality in the website builder, you can achieve this effect quite easily with a small amount of custom css. 

Please note, this code is only for desktop and laptop screen sizes and the breakpoint is set at 768px. You will also need to create a mobile menu separately. The best way to do this, is usually to add an icon to the top right of the screen and link it to a popup that's 60% of the width and 100% of the height, with a vertical menu. 

 

/* Hide dropdown icons*/
.menu1-nav li a i {
    display: none !important;
}

/*Center align*/
.menu1-nav ul ul li {
    justify-content: center;
    padding: 10px 20px 10px 20px;
}

/* Add padding to dropdown links */
.menu1-nav ul li a {
    padding: 10px 20px 10px 20px !important;
}

/* Create 2 columns in dropdown */
.menu1-nav ul ul {
    width: initial;
    left: -100% !important;
    column-count: 2 !important;
    width: 40vw !important;
    position: absolute;
    left: 50% !important;
    transform: translate(-50%, 0%);
}

/* Prevents dropdown items from breaking into multiple lines */
.menu1-nav ul ul li {
    break-inside: avoid;
}

 

 

Please note, depending on how many columns you want, you will need to adjust the column-count: 2 !important; e.g. If you want 3 columns, increase to 3 etc. 

As for where the menu items will appear in the dropdown, they will be structured based on the following format: 

1.           4.           

2.           5.

3.           6.

 

If you then add a 7th menu item, the format will change so 4 drops down to the bottom left under 3. 

E. G. 

1.         5.

2.        6.

3.        7.

4.

 

Adding an 8th menu link will put it directly under 7, as you would expect, but if you then change the column count to 3, then the format would completely change to:

  1.      4.      7.
  2.      5.      8.
  3.      6.

Our code deliberately centers the mega menu to the middle of the screen, assuming your menu is in the center, if you want to right align the mega menu, you will need to adjust "right: auto" to "right: 0" or alternatively a number of pixels or vw value e.g. "right: 10vw". This will position the menu 10% of the screen width in from the right side. 

Below are several examples that you can copy/paste. 

 

 

/* ---------- Mega Menu ---------- */
.menu1-nav li a i {
    display: none !important;
}

.menu1-nav ul ul li {
    justify-content: center;
    padding: 10px 20px 10px 20px;
}

.menu1-nav ul li a {
    padding: 10px 20px 10px 20px !important;
}

.menu1-nav ul li {
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.menu1-nav ul li:hover > ul {
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    border-left: 3px solid black;
    box-shadow: 0px 8px 8px 0px grey;
    padding: 10px !important;
}

.menu1-nav ul ul {
    width: initial;
    left: -100% !important;
    border-radius: 16px !important;
    column-count: 2 !important;
    background: white !important;
    width: 40vw !important;
    position: absolute;
    left: 50% !important;
    transform: translate(-50%, 0%);
}
   
.menu1-nav ul ul li {
    border-radius: 10px !important; 
    break-inside: avoid;
}

.menu1-nav ul li ul li:nth-child(5) {
    border-radius: 10px !important;
    padding: 0px !important;
    width: 38.5vw !important;
}

.menu1-nav ul li ul li:nth-child(5) a {
    background: linear-gradient(56deg, #45c4f9, #7d09ff 50.33%, #ff0be5);
    border-radius: 10px;
    height: 68px !important;
    width: 100% !important;
    padding-left: 30px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.menu1-nav ul li ul li:nth-child(5) a p {
    color: white !important;
    padding-left: 10px !important;
}


/* Add icons to menu items */
.menu1-nav ul li ul li a p:before {
    font-family: "Font Awesome 5 Free" !important;
    font-size: inherit;
    color: black !important;
    margin-left: -8px !important;
    margin-right: 8px !important;
    font-weight: 900 !important;
}

.menu1-nav ul li:nth-child(1) ul > li:nth-child(1) > a > p:before {
    content: "\f544" !important;
}

.menu1-nav ul li:nth-child(1) ul > li:nth-child(2) > a > p:before {
    content: "\f086";
}

.menu1-nav ul li:nth-child(1) ul > li:nth-child(3) > a > p:before {
    content: "\f662";
}

.menu1-nav ul li:nth-child(1) ul > li:nth-child(4) > a > p:before {
    content: "\f073";
}

.menu1-nav ul li:nth-child(1) ul > li:nth-child(6) > a > p:before {
    content: "\f0e8";
}

.menu1-nav ul li:nth-child(1) ul > li:nth-child(7) > a > p:before {
    content: "\f0db";
}

.menu1-nav ul li:nth-child(1) ul > li:nth-child(8) > a > p:before {
    content: "\f09d";
}

.menu1-nav ul li:nth-child(1) ul > li:nth-child(9) > a > p:before {
    content: "\f022";
}



/* Second Menu dropdown icons*/
.menu1-nav ul li:nth-child(2) ul > li:nth-child(1) > a > p:before {
    content: "\f095" !important;
}

.menu1-nav ul li:nth-child(2) ul > li:nth-child(2) > a > p:before {
    content: "\f086";
}

.menu1-nav ul li:nth-child(2) ul > li:nth-child(3) > a > p:before {
    content: "\f073";
}

.menu1-nav ul li:nth-child(2) ul > li:nth-child(4) > a > p:before {
    content: "\f658";
}

.menu1-nav ul li:nth-child(2) ul > li:nth-child(6) > a > p:before {
    content: "\f0ac";
}

.menu1-nav ul li:nth-child(2) ul > li:nth-child(7) > a > p:before {
    content: "\f662";
}

.menu1-nav ul li:nth-child(2) ul > li:nth-child(8) > a > p:before {
    content: "\f4fc";
}

.menu1-nav ul li:nth-child(2) ul > li:nth-child(9) > a > p:before {
    content: "\f573";
}

/* ---------- End of Mega Menu ---------- */
© Help Docs 2025