Solved

2 headed menus

DAC
New Member
11 0 0

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: 

 

Screenshot 2024-05-02 at 10.26.22.png

 

Accepted Solution (1)
Rishihuptech
Shopify Partner
486 82 93

This is an 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

Screenshot_10.png

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Replies 14 (14)

Rishihuptech
Shopify Partner
486 82 93

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
DAC
New Member
11 0 0

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.

Rishihuptech
Shopify Partner
486 82 93

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

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
DAC
New Member
11 0 0

I want to create the menu for dawn!

Rishihuptech
Shopify Partner
486 82 93

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

1. Create a "header-menu-top.liquidsection 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": {
      }
    },

 image_2024_05_02T13_20_11_122Z.pngScreenshot_47.png

 

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

Screenshot_48.png

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
DAC
New Member
11 0 0

Hey @Rishihuptech, 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'Screenshot 2024-05-07 at 15.47.07.png

Thanks! 

Rishihuptech
Shopify Partner
486 82 93

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

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
DAC
New Member
11 0 0

Hey @Rishihuptech 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"
  ]
}

 

Rishihuptech
Shopify Partner
486 82 93

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"
  ]
}

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
DAC
New Member
11 0 0

That has done the trick, thank you! 

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

Rishihuptech
Shopify Partner
486 82 93

This is an 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

Screenshot_10.png

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
DAC
New Member
11 0 0

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

DAC
New Member
11 0 0

Hey @Rishihuptech ! 

 

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
New Member
7 0 0

Following this also!