Re: 2 headed menus

DAC · ‎05-02-2024

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 · ‎05-13-2024

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

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

Huptech-Web · ‎05-02-2024

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 · ‎05-02-2024

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 · ‎05-02-2024

@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 · ‎05-02-2024

I want to create the menu for dawn!

Huptech-Web · ‎05-02-2024

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:

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 · ‎05-07-2024

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 · ‎05-09-2024

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 · ‎05-09-2024

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 · ‎05-09-2024

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 · ‎05-09-2024

That has done the trick, thank you!

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

Huptech-Web · ‎05-13-2024

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

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 · ‎05-14-2024

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

DAC · ‎05-16-2024

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 · ‎05-20-2024

Following this also!