Mega menus(sometimes spelled 'megamenus') are a type of expandable menu in which numerous choices are displayed in a two-dimensional dropdown layout.

They are a great design choice for accommodating a large number of options or for revealing lower-level site pages at a glance.

Customizing The Main Mega Menu Image:

For this tutorial, you will need an image that meets the following requirements:

- Format: jpg
- Name: menu-image
- Size: 600 x 600

To adjust the image that is displayed on the right-hand side of the mega menu, navigate to your Juniper Web admin portal.

1. Using the menu on the left-hand side click "Library".
2. Under "Directories" choose "theme-content"
3. Choose menu-image.jpg and delete the image
4. Upload your new image, that follows the requirements above.
5. Navigate back to the frontend Juniper Web and refresh the page. You may be required to clear your cache.

CustomizingThe Mega Menu Footer

To adjust the footer that is present on the mega menu, navigate to the Juniper Web admin portal.

1. Using the menu on the left-hand side, click "Website" > "Pages"
2. Click the "menu-footer" page to go into the editor
3. Add the UI elements, Save and Publish your draft.
4. Navigate back to the frontend of Juniper Web and refresh the page. You may be required to clear your cache.

Do you know HTML & CSS or have a web manager that does?

Sell Theme utilizes...

• BootStrap framework
  https://getbootstrap.com/docs/4.1/getting-started/introduction/

FontAwesome & Orion icon libraries

• https://orioniconlibrary.com/all-icons
• https://fontawesome.com/icons?d=gallery

HTML & CSS can be added to the mega menu footer by....

1. Adding a Paragraph or similar UI element.
2. Clicking the element, then within the editor clicking the Source Code icon
3. Pasting in your HTML / CSS
4. Save and Publish your draft.
5. Navigate back to the frontend of your Juniper Web site and refresh the page. You maybe required to clear your cache.

Sample HTML & CSS for Mega Menu Footer

<div class="row megamenu-services d-none d-lg-flex">
<div class="col-xl-4 col-lg-4 d-flex">
<div class="megamenu-services-item"><svg class="svg-icon megamenu-services-icon"> <use xlink:href="#delivery-time-1"> </use> </svg>
<div>
<h6 class="text-uppercase">QUICK SHIP</h6>
<p class="mb-0 text-muted text-sm">WITHIN 48 HOURS</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 d-flex">
<div class="megamenu-services-item"><svg class="svg-icon megamenu-services-icon"> <use xlink:href="#money-1"> </use> </svg>
<div>
<h6 class="text-uppercase">SECURE PAYMENT</h6>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 d-flex">
<div class="megamenu-services-item"><svg class="svg-icon megamenu-services-icon"> <use xlink:href="#earth-globe-1"></use> </svg>
<div>
<h6 class="text-uppercase">ORIGINAL DESIGN</h6>
</div>
</div>
</div>
</div>