Megamenu:

This section displays a megamenu on the header section of the site.

How to add content:

• Step1: In the data file for megamenu in _data > do-menu.yml

megamenu-2:
- title:  # use menu title here
  image-url:  # Use mega menu column image url here
  image-link: # Use mega menu column image link url here
  option:
    - icon: <img src="/assets/images/icons/layout.svg">  # use submenu icon here
      title: Flexible and multi-purpose layouts  # use submenu title here
      url: /features/#flexible  # use submenu url here
      content: Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do  # use submenu content here
      content-url: /features/#flexible  # use submenu content-url here

• Megamenu-2: This is the array name for the megamenu. Note: Use this array name in megamenu option for header. Without using this name properly mega menu will not be displayed. For more details go to Header-1.

  • Title: Use the title for the megamenu column.

  • image-url: Use mega menu image path here. Note: If this image is used then the links will not be displayed.

  • image-link: Use mega menu image link here. This link is used for megamenu image onclick navigation.

  • Option: Use option for adding list of links on megemenu column. Note: If “image-url” attribute is used then this array will not be used.

    • icon: Use icon for the title here.
    • title: Use title for the anchor here.
    • url: Use url for the anchor here.
    • content: Use content for the anchor here.
    • Content-url: Use content url for the anchor here.

How to add in page:

• Step1: Add megamenu using the include statement. Note: Megamenu can only be included with header. It cannot be included separately.

• Step1: Use on header section.

  {% include do-mega-menu.html %}

Example code snippet:

<section class="darkout-section">
{% include do-mega-menu.html %}
</section>