How to add a text menu next to the hamburger icon?

[Rubberduck]

Hello!

would it be possible to add a menu where i marked at the picture on the desktop version of the website? Like they have here (rolex.com) so it says Menu next to the hamburger menu.

thank you!

nexwatches.no

[ExpertRookie]

Hi @Rubberduck
To add the text, you need to check and add the text into the theme code.
Please share the store url, then we can guide you add the text for your theme

[Rubberduck]

I have shared it: Nexwatches.no

[ExpertRookie]

Hi @Rubberduck
You can try follow this path:
Themes => edit code => section => header.liquid
try to find the text ‘Open navigation’ and add your text after the tag.
Or you can share the header.liquid code, then we will help you.

[Rubberduck]

Hello!

Here is the code:

{%- assign use_transparent_header = false -%}

{%- if template == ‘index’ and section.settings.enable_transparent_header -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if template.name == ‘collection’ and section.settings.enable_transparent_header_collection and collection.image and collection.all_products_count > 0 and collection.template_suffix != ‘no-image’ -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if section.settings.navigation_style != ‘sidebar’ -%}
{%- assign use_sidebar_menu = false -%}
{%- else -%}
{%- assign use_sidebar_menu = true -%}
{%- endif -%}

{%- if settings.currency_conversion_enabled -%}
{%- capture currency_conversion_select -%}

{%- capture codes -%}USD,EUR,GBP,CAD,ARS,AUD,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK{%- endcapture -%} {%- assign supported_codes = settings.currency_conversion_supported_currencies | remove_first: shop.currency | upcase | split: ' ' | uniq -%} {{ shop.currency }} {%- for code in supported_codes -%} {%- if codes contains code -%} {{ code }} {%- endif -%} {%- endfor -%}

{%- include ‘icon’ with ‘select-arrow’ -%}

{%- endcapture -%} {%- endif -%}

{%- comment -%}

HEADER CONTENT

{%- endcomment -%}

{%- capture section_settings -%}
{
“navigationStyle”: {{ section.settings.navigation_style | json }},
“hasTransparentHeader”: {% if use_transparent_header %}true{% else %}false{% endif %},
“isSticky”: {% if section.settings.use_sticky_header %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{%- include 'icon' with 'nav' -%} {%- include 'icon' with 'nav-desktop' -%}

{%- comment -%}

DESKTOP NAVIGATION (if not using the sidebar mode)

{%- endcomment -%}

{%- unless use_sidebar_menu -%}
{%- assign main_menu_handle = section.settings.navigation_menu | default: ‘main-menu’ -%}
{%- assign main_menu = linklists[main_menu_handle] -%}

{%- assign mega_menu_names = ‘’ -%}

{%- for block in section.blocks -%}
{%- if block.type == ‘mega_menu’ -%}
{%- assign mega_menu_names = mega_menu_names | append: block.settings.navigation_mega_menu | append: ‘,’ -%}
{%- endif -%}
{%- endfor -%}

{%- assign mega_menu_names = mega_menu_names | downcase | split: ‘,’ | compact -%}

{%- for link in main_menu.links -%} {%- assign downcased_link_title = link.title | downcase -%} {%- assign use_mega_menu = false -%}

{%- capture menu_item_dropdown -%}
{%- if mega_menu_names contains downcased_link_title -%}
{%- for block in section.blocks -%}
{%- assign downcased_mega_menu_name = block.settings.navigation_mega_menu | downcase -%}

{%- if downcased_mega_menu_name != downcased_link_title -%}
{%- continue -%}
{%- endif -%}

{%- assign use_mega_menu = true -%}
{%- assign push_image_count = 0 -%}

{%- if block.settings.push_1_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}

{%- if block.settings.push_2_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}

{%- assign should_space_evenly = false -%}

{%- if push_image_count == 0 and link.links.size <= 3 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- if push_image_count == 1 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- if push_image_count == 2 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}

{%- for sub_link in link.links -%}
{{ sub_link.title | title }}
{%- if sub_link.links != blank -%}
{%- for sub_sub_link in sub_link.links -%}
• {{ sub_sub_link.title | escape }}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- if push_image_count > 0 -%}
{%- if block.settings.push_1_image -%}
{%- if block.settings.push_1_url != blank -%} {%- endif -%}
{%- assign max_width = 370 | at_most: block.settings.push_1_image.width -%}
{%- if block.settings.push_1_heading != blank -%}
{{ block.settings.push_1_heading | escape }}
{%- endif -%}
{%- if block.settings.push_1_subheading != blank -%}
{{ block.settings.push_1_subheading | escape }}
{%- endif -%}
{%- if block.settings.push_1_url != blank -%}

{%- endif -%}
{%- endif -%}
{%- if block.settings.push_2_image -%}
{%- if block.settings.push_2_url != blank -%} {%- endif -%}
{%- assign max_width = 370 | at_most: block.settings.push_2_image.width -%}
{%- if block.settings.push_2_heading != blank -%}
{{ block.settings.push_2_heading | escape }}
{%- endif -%}
{%- if block.settings.push_2_subheading != blank -%}
{{ block.settings.push_2_subheading | escape }}
{%- endif -%}
{%- if block.settings.push_2_url != blank -%}

{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%} {%- elsif link.links != blank -%}
{%- for sub_link in link.links -%}
• {{ sub_link.title | escape }} {% if sub_link.links != blank %}{% include 'icon' with 'select-arrow-right' %}{% endif %}

  {%- if sub_link.links != blank -%}

  {%- for sub_sub_link in sub_link.links -%}
  • {{ sub_sub_link.title | escape }}
  {%- endfor -%}
  {%- endif -%}
{%- endfor -%}
{%- endif -%} {%- endcapture -%}
• {{- link.title | escape -}}

  {%- if use_mega_menu or menu_item_dropdown == blank -%}
  {{ link.title | escape }}
  {%- endif -%}
  

  {{- menu_item_dropdown -}}

{%- endfor -%}

{{- currency_conversion_select -}}
{%- endunless -%}

{%- capture header_logo -%}

{%- if section.settings.logo != blank -%}
{%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}

{%- if use_transparent_header and section.settings.transparent_logo != blank -%}

{%- endif -%}
{%- else -%}
{{ shop.name }}
{%- endif -%}

{%- endcapture -%}

{%- if template == 'index' -%}

{{ header_logo }}

{%- else -%}

{{ header_logo }}

{%- endif -%}

{%- unless use_sidebar_menu -%}

{%- if settings.currency_conversion_enabled and section.settings.navigation_style == 'inline' -%}
• {{ currency_conversion_select }}
{%- endif -%}

{%- if shop.customer_accounts_enabled -%}

• {{- 'header.navigation.account' | t -}}
{%- endif -%}
• {{ 'header.navigation.search' | t }}
• {{ 'header.navigation.cart' | t }} ({{ cart.item_count }})

{%- endunless -%}

<a href=“/cart” class=“Header__Icon Icon-Wrapper Icon-Wrapper–clickable {% unless use_sidebar_menu %}hidden-desk{% endunless %}” {% if settings.cart_type == ‘drawer’ %}data-action=“open-drawer” data-drawer-id=“sidebar-cart” aria-expanded=“false” aria-label=“{{ ‘header.navigation.open_cart’ | t }}”{% endif %}>
{%- include ‘icon’ with ‘cart’ -%}
{%- include ‘icon’ with ‘cart-desktop’ -%}

{%- if section.settings.use_sticky_header -%} :root { --use-sticky-header: 1; } .shopify-section--header { position: -webkit-sticky; position: sticky; } {%- endif -%} {%- if use_transparent_header -%} :root { --header-is-not-transparent: 0; --header-is-transparent: 1; } .shopify-section--header { margin-bottom: calc(-1 * var(--header-height)); } .supports-sticky .Header--transparent { box-shadow: 0 -1px {{ section.settings.transparent_text_color | color_modify: 'alpha', 0.25 }} inset; color: {{ section.settings.transparent_text_color }}; } {%- else -%} :root { --header-is-not-transparent: 1; --header-is-transparent: 0; } {%- endif -%}

{% schema %}
{
“name”: “Header”,
“class”: “shopify-section–header”,
“settings”: [
{
“type”: “checkbox”,
“id”: “use_sticky_header”,
“label”: “Use sticky header”,
“default”: true
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “Logo image”,
“info”: “200 x 60px png recommended”
},
{
“type”: “range”,
“id”: “logo_max_width”,
“min”: 50,
“max”: 350,
“step”: 5,
“unit”: “px”,
“label”: “Logo image width”,
“default”: 140
},
{
“type”: “header”,
“content”: “Navigation”
},
{
“type”: “link_list”,
“id”: “navigation_menu”,
“label”: “Menu”,
“default”: “main-menu”
},
{
“type”: “select”,
“id”: “navigation_style”,
“label”: “Navigation style”,
“info”: “Setting will default to center style if screen width cannot fit all the links.”,
“options”: [
{
“value”: “sidebar”,
“label”: “Sidebar”
},
{
“value”: “inline”,
“label”: “Inline”
},
{
“value”: “center”,
“label”: “Center”
}
],
“default”: “inline”
},
{
“type”: “header”,
“content”: “Transparent header”
},
{
“type”: “checkbox”,
“id”: “enable_transparent_header”,
“label”: “Enable on homepage”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “enable_transparent_header_collection”,
“label”: “Enable on collection pages”,
“info”: “Only if the collection has an image.”,
“default”: false
},
{
“type”: “color”,
“id”: “transparent_text_color”,
“label”: “Text/icon color”,
“default”: “#ffffff”
},
{
“type”: “image_picker”,
“id”: “transparent_logo”,
“label”: “Logo image”,
“info”: “200 x 60px png recommended”
}
],
“blocks”: [
{
“type”: “mega_menu”,
“name”: “Mega menu”,
“settings”: [
{
“type”: “text”,
“id”: “navigation_mega_menu”,
“label”: “Menu item”,
“info”: “Enter menu item to apply a mega menu dropdown. Learn more.”
},
{
“type”: “header”,
“content”: “Image push 1”
},
{
“type”: “image_picker”,
“id”: “push_1_image”,
“label”: “Image”,
“info”: “740 x 460 px jpg recommended”
},
{
“type”: “text”,
“id”: “push_1_heading”,
“label”: “Heading”,
“default”: “Example heading”
},
{
“type”: “text”,
“id”: “push_1_subheading”,
“label”: “Sub-heading”,
“default”: “Example sub-heading”
},
{
“type”: “url”,
“id”: “push_1_url”,
“label”: “Link”
},
{
“type”: “header”,
“content”: “Image push 2”
},
{
“type”: “image_picker”,
“id”: “push_2_image”,
“label”: “Image”,
“info”: “740 x 460 px jpg recommended”
},
{
“type”: “text”,
“id”: “push_2_heading”,
“label”: “Heading”,
“default”: “Example heading”
},
{
“type”: “text”,
“id”: “push_2_subheading”,
“label”: “Sub-heading”,
“default”: “Example sub-heading”
},
{
“type”: “url”,
“id”: “push_2_url”,
“label”: “Link”
}
]
}
]
}
{% endschema %}

[Rubberduck]

Hello!

Thank you. Here it is. Keep in mind, i only want it on dekstop version.

{%- assign use_transparent_header = false -%}

{%- if template == 'index' and section.settings.enable_transparent_header -%}
  {%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if template.name == 'collection' and section.settings.enable_transparent_header_collection and collection.image and collection.all_products_count > 0 and collection.template_suffix != 'no-image' -%}
  {%- assign use_transparent_header = true -%}
{%- endif -%}

{%- if section.settings.navigation_style != 'sidebar' -%}
  {%- assign use_sidebar_menu = false -%}
{%- else -%}
  {%- assign use_sidebar_menu = true -%}
{%- endif -%}

{%- if settings.currency_conversion_enabled -%}
  {%- capture currency_conversion_select -%}
    
      

        

        {%- include 'icon' with 'select-arrow' -%}
      

    

  {%- endcapture -%}
{%- endif -%}

{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
HEADER CONTENT
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- capture section_settings -%}
{
  "navigationStyle": {{ section.settings.navigation_style | json }},
  "hasTransparentHeader": {% if use_transparent_header %}true{% else %}false{% endif %},
  "isSticky": {% if section.settings.use_sticky_header %}true{% else %}false{% endif %}
}
{%- endcapture -%}

{% schema %}
{
  "name": "Header",
  "class": "shopify-section--header",
  "settings": [
    {
      "type": "checkbox",
      "id": "use_sticky_header",
      "label": "Use sticky header",
      "default": true
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo image",
      "info": "200 x 60px png recommended"
    },
    {
      "type": "range",
      "id": "logo_max_width",
      "min": 50,
      "max": 350,
      "step": 5,
      "unit": "px",
      "label": "Logo image width",
      "default": 140
    },
    {
      "type": "header",
      "content": "Navigation"
    },
    {
      "type": "link_list",
      "id": "navigation_menu",
      "label": "Menu",
      "default": "main-menu"
    },
    {
      "type": "select",
      "id": "navigation_style",
      "label": "Navigation style",
      "info": "Setting will default to center style if screen width cannot fit all the links.",
      "options": [
        {
          "value": "sidebar",
          "label": "Sidebar"
        },
        {
          "value": "inline",
          "label": "Inline"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "inline"
    },
    {
      "type": "header",
      "content": "Transparent header"
    },
    {
      "type": "checkbox",
      "id": "enable_transparent_header",
      "label": "Enable on homepage",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "enable_transparent_header_collection",
      "label": "Enable on collection pages",
      "info": "Only if the collection has an image.",
      "default": false
    },
    {
      "type": "color",
      "id": "transparent_text_color",
      "label": "Text/icon color",
      "default": "#ffffff"
    },
    {
      "type": "image_picker",
      "id": "transparent_logo",
      "label": "Logo image",
      "info": "200 x 60px png recommended"
    }
  ],
  "blocks": [
    {
      "type": "mega_menu",
      "name": "Mega menu",
      "settings": [
        {
          "type": "text",
          "id": "navigation_mega_menu",
          "label": "Menu item",
          "info": "Enter menu item to apply a mega menu dropdown. [Learn more](http://support.maestrooo.com/article/149-navigation-enabling-and-configuring-mega-menu)."
        },
        {
          "type": "header",
          "content": "Image push 1"
        },
        {
          "type": "image_picker",
          "id": "push_1_image",
          "label": "Image",
          "info": "740 x 460 px jpg recommended"
        },
        {
          "type": "text",
          "id": "push_1_heading",
          "label": "Heading",
          "default": "Example heading"
        },
        {
          "type": "text",
          "id": "push_1_subheading",
          "label": "Sub-heading",
          "default": "Example sub-heading"
        },
        {
          "type": "url",
          "id": "push_1_url",
          "label": "Link"
        },
        {
          "type": "header",
          "content": "Image push 2"
        },
        {
          "type": "image_picker",
          "id": "push_2_image",
          "label": "Image",
          "info": "740 x 460 px jpg recommended"
        },
        {
          "type": "text",
          "id": "push_2_heading",
          "label": "Heading",
          "default": "Example heading"
        },
        {
          "type": "text",
          "id": "push_2_subheading",
          "label": "Sub-heading",
          "default": "Example sub-heading"
        },
        {
          "type": "url",
          "id": "push_2_url",
          "label": "Link"
        }
      ]
    }
  ]
}
{% endschema %}

[Rubberduck]

Hello!

Everytime i leave a comment with the code, it gets removed, so i am not able to show you.. But i cant find what you say i should look for.

[Rubberduck]

The code is now live here!

[ExpertRookie]

Hi @Rubberduck
Try to find the code in your theme and add text like this image

[KristiyanKK]

Hello! Thanks for the tip. I added text as desired but now is not centred with the text. I tried many things but could’t get it centred, can you please help?