Show Options

Header 2:

This section displays a navigation menu with optional dropdown menu, megamenu options and a header widget with call us button, opening time details, email us button with email address and social media icons.


Module Elements:

  • It consist of:
    • Site logo.
    • Navigation menu.
    • Dropdown menu.
    • Megamenu.
    • Call us button with details.
    • opening time details.
    • Email us button with site email address.
    • Social media icons for the site.

How to add content:

  • Step1: In the data file for header in _data > do-menu.yml
menu:
- title: Home  # Use header title here
  href: /  # Use header title url here
  megamenu: megamenu-1 # Use megamenu array name here
- title: Features  # Use header title here
  href: /features/  # Use header title url here
  option: # Use this option for subdropdownmenu
    - title: home # Use subdropdown menu title here
      href: / #  Use subdropdown menu link here
      option:  # Use this option for creating dropdown menu inside the subdropdown menu
        - title: contact #  Use title here
          href: /contact/ #  Use link here
  • Menu:
    • Title: Use nav menu text here.

    • Href: Use nav menu text-link here.

    • Megamenu: If the menu contains the mega menu, Use mega menu name here. Use this name as megamenu data name. Refer megamenu documentation for more details here Megamenu.

    • Option: Use option array inside menu array for dropdown menu.

      • Title: Use dropdown menu text here.

      • Href: Use dropdown menu text-link here.


How to add in page:

  • Step1: Add header to the page using the include statement.
  • Step2: On the page use

    {% include do-header-2.html %}

    • This header uses following site variables from config.yml file.
# Logo & Favicon Settings
logo: /assets/images/branding/darkout-logo_jekyll-logo-dark.svg  # Use logo icon here
logo-width: 150px  # Use logo width here (default 150px)
favicon: /assets/images/branding/darkout-logo_jekyll-icon.png  # Use favicon here
# Header Settings
header-layout: header-2  # Use options header-1, header-2
header-widget: true  # Use options true or false
header-social-icon: true  # Use Options true or false
telephone: 0431-450112  # Use telephone number (used in header-2 layout)
email: info@info.com # Use email id (used in header-2 layout)
working-hours: 1 pm to 10 pm # Use Working-hours (used in header-2 layout)
# Social Media Information
twitter: "#"  # Use twitter link for your website
facebook: "#"  # Use facebook link for your website
instagram: "#"  # Use instagram link for your website
  • Header settings:

    • Header-layout: Use header-2 for this header. (Mandatory)

    • Logo: This logo is used in header. Use logo url here.

    • Logo-width: This logo width attribute is used for logo. Use logo width here.

    • Favicon: This favicon is used for site icon. Use favicon url here.

    • Header-widgets: It has the following options.
      • True: Widgets will be displayed.
      • False: Widgets will not be displayed.
    • Header-social-icon: It has the following options.
      • True: Social icons will be displayed.
      • False: Social icons will not be displayed.
    • Facebook: Use Facebook link in site variable so that it will be displayed in header widget.

    • Twitter: Use Twitter link in site variable so that it will be displayed in header widget.

    • Instagram: Use Instagram link in site variable so that it will be displayed in header widget.

Example code snippet:


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