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
- title:  # use menu title here
  image-url:  # Use mega menu column image url here
  image-link: # Use mega menu column image link url here
    - 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 %}