Sell Theme: How To Adjust The Mega Menu Sell Theme: How To Adjust The Mega Menu

Sell Theme: How To Adjust The Mega Menu

Mega menus(sometimes spelled 'megamenus') are a type of expandablemenuin 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.

Mega_Menu_2.gif

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 maybe required to clear your cache.

Add_Mega_Menu_Image_2.gif

CustomizingThe Mega Menu Footer

menu_footer.pngTo 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...

FontAwesome & Orion icon libraries

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 iconmceclip0.png
  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.

Footer_Menu.gif

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>
Need further support? Submit a request