Page Header

Description

Available On

The following is a list of pages the section template can be found on:

• Theme

The Page Header section is imported from the layout template and used globally. The Footer template is also global.

Template Markup

<header class="header" data-preview-item="header">
  <div class="container">

    <!-- Logo -->
    <div class="header__logo">
      {% if site.has_logo %}
        <a href="{{ site.home_url }}" class="header__logo"><img src="{{ site.logo_url }}"></a>
      {% else %}
        <a href="{{ site.home_url }}" class="header__school-name">{{ site.name }}</a>
      {% endif %}
    </div>

    <nav class="header__nav">
      <div class="header__nav-left">
        <ul>
          <li class="header__nav-item">
            <a href="{{ site.collections_url }}">
              {{ 'liquid.partials.header_with_links.link_all_courses' | translate }}
            </a>
          </li>

          {% if site.current_user.signed_in %}
          <li class="header__nav-item">
            <a href="{{ site.student_dashboard_url }}">
              {{ 'liquid.partials.header_with_links.link_my_dashboard' | translate }}
            </a>
          </li>
          {% endif %}

          {% include "header_left_menu" %}

        </ul>
      </div>

      <div class="header__nav-right">
        <ul>
          {% include "header_right_menu" %}

          {% if site.current_user.signed_in %}
          <li class="dropdown header__nav-item">
            <a class="dropdown__toggle-button" data-toggle="dropdown">
              {{ site.current_user.first_name_last_initial }}
              <img src="{{ site.current_user.avatar }}" class="header__user-avatar">
              <b class="caret"></b>
            </a>
            {% include "header_user_menu" %}
          </li>

          {% else %}
          <li class="header__nav-item sign-in">
            <a href='{{ site.sign_in_url }}'>
              {{ 'liquid.partials.header_with_links.link_sign_in' | translate }}
            </a>
          </li>
          {% endif %}

        </ul>
      </div>
    </nav>

    <button class="header__nav-mobile-button">
      {{ 'liquid.partials.header_with_links.button_menu' | translate }}
    </button>

  </div>
</header>

{% style %}
...
{% endstyle %}

{% schema %}
...
{% schema %}

Style

Alignment, Layout & Style modifiers will be encapsulated with {% style %} & {% endstyle %} tags.

Schema

Schema will be encapsulated with {% schema %} & {% endschema %} tags.

{
  "label": "Page Header",
  "settings": [
    {
      "label": "Navigation",
      "settings": [
        {
          "type": "select",
          "id": "menu_style",
          "label": "Menu Style",
          "default": "transparent",
          "options": [
            {
              "value": "solid",
              "label": "Solid Color"
            },
            {
              "value": "transparent",
              "label": "Transparent"
            }
          ]
        },
        {
          "type": "select",
          "id": "menu_mobile_type",
          "label": "Mobile Menu Type",
          "default": "expanded",
          "options": [
            {
              "value": "expanded",
              "label": "Expanded"
            },
            {
              "value": "overlay",
              "label": "Overlay"
            }
          ]
        }
      ]
    }
  ]
}