2 headed menus

[DAC]

I'm currently designing a new theme on Dawn and would like to have 2 headed menus, I appreciate this is quite vague so see the desired effect below: 

[Huptech-Web]

Hello @DAC , Can you please share your store URL?

[DAC]

Silly me, here it is:

https://www.darkartscoffee.co.uk/

It's worth mentioning the current theme I am running on that link is paralax, not Dawn.

[Huptech-Web]

@DAC , Do you want to create the menu for Dawn or Parallax?

[DAC]

I want to create the menu for dawn!

[Huptech-Web]

Hello @DAC , To create a 2 headed menu follow the below steps.

1. Create a "header-menu-top.liquid" section file in your DAWN theme and add the code below.

<div class="header-section-top">
  {% assign link_list_menu = section.settings.menu %}
  {% if link_list_menu != blank %}
<header class="header page-width">
    <nav class="header__inline-menu">
          <ul class="list-menu list-menu--inline" role="list">
            {%- for link in section.settings.menu.links -%}
              <li>
                {%- if link.links != blank -%}
                  <header-menu>
                    <details id="Details-HeaderMenu-{{ forloop.index }}">
                      <summary class="header__menu-item list-menu__item link focus-inset">
                        <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                        {% render 'icon-caret' %}
                      </summary>
                      <ul id="HeaderMenu-MenuList-{{ forloop.index }}" class="header__submenu list-menu list-menu--disclosure gradient caption-large motion-reduce global-settings-popup" role="list" tabindex="-1">
                        {%- for childlink in link.links -%}
                          <li>
                            {%- if childlink.links == blank -%}
                              <a href="{{ childlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large test-link{% if childlink.current %} list-menu__item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                                {{ childlink.title | escape }}
                              </a>
                            {%- else -%}
                              <details id="Details-HeaderSubMenu-{{ forloop.index }}">
                                <summary class="header__menu-item link link--text list-menu__item focus-inset caption-large">
                                  <span>{{ childlink.title | escape }}</span>
                                  {% render 'icon-caret' %}
                                </summary>
                                <ul id="HeaderMenu-SubMenuList-{{ forloop.index }}" class="header__submenu list-menu motion-reduce">
                                  {%- for grandchildlink in childlink.links -%}
                                    <li>
                                      <a href="{{ grandchildlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
                                        {{ grandchildlink.title | escape }}
                                      </a>
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </details>
                            {%- endif -%}
                          </li>
                        {%- endfor -%}
                      </ul>
                    </details>
                  </header-menu>
                {%- else -%}
                  <a href="{{ link.url }}" class="header__menu-item list-menu__item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %}>
                    <span {%- if link.current %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                  </a>
                {%- endif -%}
              </li>
            {%- endfor -%}
          </ul>
        </nav>
</header>
  {% endif %}
</div>

{% schema %}
{
  "name": "Heade Menu Top",
  "class": "header-menu-top-section",
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "Add Menu"
    }
  ]
}
{% endschema %}

2. Find the "header-group.json" section file and add the below code as shown in the screenshot.

 "header-menu-top": {
      "type": "header-menu-top",
      "settings": {
      }
    },

 

This will add a header section to the top of your website. Review the screenshot below:

[DAC]

Hey @Huptech-Web, thanks for this! 

I've ran into a wall in the header-group.json, when trying to save I get the att
ached message. 

Also my area for this code looks slightly different to the screenshot. 

• Liquid syntax error (line 58): Unknown tag 'schema'

Thanks! 

[Huptech-Web]

Hi @DAC , Can you please share the code I'll update it and send it to you.

[DAC]

Hey @Huptech-Web thank you! 

So for your info the header-menu-top.liquid is added in the sections area in code. Here are the details:

<div class="header-section-top">
  {% assign link_list_menu = section.settings.menu %}
  {% if link_list_menu != blank %}
<header class="header page-width">
    <nav class="header__inline-menu">
          <ul class="list-menu list-menu--inline" role="list">
            {%- for link in section.settings.menu.links -%}
              <li>
                {%- if link.links != blank -%}
                  <header-menu>
                    <details id="Details-HeaderMenu-{{ forloop.index }}">
                      <summary class="header__menu-item list-menu__item link focus-inset">
                        <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                        {% render 'icon-caret' %}
                      </summary>
                      <ul id="HeaderMenu-MenuList-{{ forloop.index }}" class="header__submenu list-menu list-menu--disclosure gradient caption-large motion-reduce global-settings-popup" role="list" tabindex="-1">
                        {%- for childlink in link.links -%}
                          <li>
                            {%- if childlink.links == blank -%}
                              <a href="{{ childlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large test-link{% if childlink.current %} list-menu__item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                                {{ childlink.title | escape }}
                              </a>
                            {%- else -%}
                              <details id="Details-HeaderSubMenu-{{ forloop.index }}">
                                <summary class="header__menu-item link link--text list-menu__item focus-inset caption-large">
                                  <span>{{ childlink.title | escape }}</span>
                                  {% render 'icon-caret' %}
                                </summary>
                                <ul id="HeaderMenu-SubMenuList-{{ forloop.index }}" class="header__submenu list-menu motion-reduce">
                                  {%- for grandchildlink in childlink.links -%}
                                    <li>
                                      <a href="{{ grandchildlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
                                        {{ grandchildlink.title | escape }}
                                      </a>
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </details>
                            {%- endif -%}
                          </li>
                        {%- endfor -%}
                      </ul>
                    </details>
                  </header-menu>
                {%- else -%}
                  <a href="{{ link.url }}" class="header__menu-item list-menu__item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %}>
                    <span {%- if link.current %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                  </a>
                {%- endif -%}
              </li>
            {%- endfor -%}
          </ul>
        </nav>
</header>
  {% endif %}
</div>

{% schema %}
{
  "name": "Heade Menu Top",
  "class": "header-menu-top-section",
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "Add Menu"
    }
  ]
}
{% endschema %}

Here's the code which is in header-group.json :

{
  "name": "t:sections.header.name",
  "type": "header",
  "sections": {
    "header": {
      "type": "header",
      "settings": {
        "logo_position": "middle-center",
        "menu": "new-menu",
        "menu_type_desktop": "dropdown",
        "sticky_header_type": "reduce-logo-size",
        "show_line_separator": true,
        "color_scheme": "scheme-d1882f8d-9d43-4405-9c08-9896b5b7377d",
        "menu_color_scheme": "scheme-d1882f8d-9d43-4405-9c08-9896b5b7377d",
        "enable_country_selector": true,
        "enable_language_selector": true,
        "mobile_logo_position": "center",
        "margin_bottom": 0,
        "padding_top": 0,
        "padding_bottom": 0
      }
    }
  },
  "order": [
    "header"
  ]
}

[Huptech-Web]

Hello @DAC , Replace the below code in your "header-group.json". It will do the work!

{
  "name": "t:sections.header.name",
  "type": "header",
  "sections": {
    "header-menu-top": {
      "type": "header-menu-top",
      "settings": {
      }
    },
    "header": {
      "type": "header",
      "settings": {
        "logo_position": "middle-center",
        "menu": "new-menu",
        "menu_type_desktop": "dropdown",
        "sticky_header_type": "reduce-logo-size",
        "show_line_separator": true,
        "color_scheme": "scheme-d1882f8d-9d43-4405-9c08-9896b5b7377d",
        "menu_color_scheme": "scheme-d1882f8d-9d43-4405-9c08-9896b5b7377d",
        "enable_country_selector": true,
        "enable_language_selector": true,
        "mobile_logo_position": "center",
        "margin_bottom": 0,
        "padding_top": 0,
        "padding_bottom": 0
      }
    }
  },
  "order": [
    "header-menu-top",
    "header"
  ]
}

[DAC]

That has done the trick, thank you! 

My final question is how to adjust the colour of the top menu?

[Huptech-Web · Accepted solution]

Hello @DAC 

Replace your code with the below code

File Name: sections/header-menu-top.liquid

<style>
  .header-section-top{
    background:{{ section.settings.header_bg_color }}
  }
  .header__menu-item{
    color:{{ section.settings.header_text_color }} 
  }
</style>
<div class="header-section-top">
  {% assign link_list_menu = section.settings.menu %}
  {% if link_list_menu != blank %}
    
<header class="header page-width">
    <nav class="header__inline-menu">
          <ul class="list-menu list-menu--inline" role="list">
            {%- for link in section.settings.menu.links -%}
              <li>
                {%- if link.links != blank -%}
                  <header-menu>
                    <details id="Details-HeaderMenu-{{ forloop.index }}">
                      <summary class="header__menu-item list-menu__item link focus-inset">
                        <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                        {% render 'icon-caret' %}
                      </summary>
                      <ul id="HeaderMenu-MenuList-{{ forloop.index }}" class="header__submenu list-menu list-menu--disclosure gradient caption-large motion-reduce global-settings-popup" role="list" tabindex="-1">
                        {%- for childlink in link.links -%}
                          <li>
                            {%- if childlink.links == blank -%}
                              <a href="{{ childlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large test-link{% if childlink.current %} list-menu__item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
                                {{ childlink.title | escape }}
                              </a>
                            {%- else -%}
                              <details id="Details-HeaderSubMenu-{{ forloop.index }}">
                                <summary class="header__menu-item link link--text list-menu__item focus-inset caption-large">
                                  <span>{{ childlink.title | escape }}</span>
                                  {% render 'icon-caret' %}
                                </summary>
                                <ul id="HeaderMenu-SubMenuList-{{ forloop.index }}" class="header__submenu list-menu motion-reduce">
                                  {%- for grandchildlink in childlink.links -%}
                                    <li>
                                      <a href="{{ grandchildlink.url }}" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"{% if grandchildlink.current %} aria-current="page"{% endif %}>
                                        {{ grandchildlink.title | escape }}
                                      </a>
                                    </li>
                                  {%- endfor -%}
                                </ul>
                              </details>
                            {%- endif -%}
                          </li>
                        {%- endfor -%}
                      </ul>
                    </details>
                  </header-menu>
                {%- else -%}
                  <a href="{{ link.url }}" class="header__menu-item list-menu__item link link--text focus-inset"{% if link.current %} aria-current="page"{% endif %}>
                    <span {%- if link.current %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                  </a>
                {%- endif -%}
              </li>
            {%- endfor -%}
          </ul>
        </nav>
</header>
  {% endif %}
</div>

{% schema %}
{
  "name": "Heade Menu Top",
  "class": "header-menu-top-section",
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "Add Menu"
    },
      {
      "type": "color",
      "id": "header_bg_color",
      "label": "Header Background Color"
    }
    ,
      {
      "type": "color",
      "id": "header_text_color",
      "label": "Header Navigation text Color"
    }
  ]
}
{% endschema %}

in the header section, you can customize header background and text colot

[DAC]

This has hit the exact goal I was looking for, thank you!!! 

[DAC]

Hey @Huptech-Web ! 

Sorry for dropping a message, I have 3 questions about the double menu:

1) I would like to adjust the padding for the top menu to reduce it slightly, I can't find anything referring to padding in the code you sent on! 

2) I would like to adjust the text size for the top menu only.

3) I would like to adjust the text colour for the top menu only, currently it is set to match the theme and I would like to set the colour via the code.

Thanks!

[TOE_BEE]

Following this also!