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.

  {% assign link_list_menu = section.settings.menu %}
  {% if link_list_menu != blank %}

  {% endif %}

{% 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:

  {% assign link_list_menu = section.settings.menu %}
  {% if link_list_menu != blank %}

  {% endif %}

{% 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]

Hello @DAC

Replace your code with the below code

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

  {% assign link_list_menu = section.settings.menu %}
  {% if link_list_menu != blank %}
    

  {% endif %}

{% 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!