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
- 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 %}