Header 1:

This section displays a navigation menu with optional dropdown menu, megamenu options and a header widget with login and signup page link.

Module Elements:

• It consist of:
  • Site logo.
  • Navigation menu.
  • Dropdown menu.
  • Megamenu.
  • Login button.
  • Signup button.

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-1.html %}

• Step3: This header uses following site variables in config.yml file.

# Header Settings
header-layout: header-1  # Use options header-1, header-2
header-widget: true  # Use options true or false
login-url: /login/  # (used in header-1 layout)
signup-url: /signup/  # (used in header-1 layout)
# 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: Use header-1 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.

  • Login-url: Header widget uses this login url for this header.

  • Signup-url: Header widget uses this signup url for this header.

Example code snippet:

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