Make the top level navigation menu clickable - Celia Theme (code below)

Store Design
, ,
1

Hi. I have a top/main menu called SERVICES. And under that are drop down menus called Braiding, Waxing, Hair Color, etc. The problem I have is when I click services, it only shows the drop down menu. The top menu becomes unclickable. How do I make the top menu clickable and the dropdown to activate when hovering the top menu? Code below:

{%- liquid
capture header_logo
render ‘header-logo’
endcapture

assign logo_position = ’ logo-position–’ | append: section.settings.logo_position
assign menu_style = ’ menu–horizontal’
assign open_external_link = section.settings.open_external_link

if section.settings.enable_drawer
assign menu_style = ’ menu–drawer’
assign logo_position = ‘’
endif

if request.page_type == ‘index’
if section.settings.enable_transparent
assign bg_transparent = ’ bg-transparent’
assign header_transparent = ’ header–transparent’
assign sticky_header = ’ is-header-transparent w-100’
unless section.settings.enable_use_text_color
assign header_text_invert = ’ header–text-invert’
if section.settings.transparent_text_color != ‘rgba(0,0,0,0)’
assign style_menu_item = ‘–color-menu-item:’ | append: section.settings.transparent_text_color
endif
endunless
endif
endif

capture icon_search
render ‘icon-search’
endcapture

capture icon_chevron_down
render ‘icon-chevron-down’, class: ‘’
endcapture
-%}

{%- if shop.customer_accounts_enabled -%}
{%- capture user_account -%}

{%- if customer -%} {%- render 'icon-user' -%} {%- capture user_account_drawer_customer -%} {{ customer.name }} {{ 'customer.account.view_account' | t }} {%- endcapture -%} {%- else -%} {%- render 'icon-account' -%} {%- capture user_account_drawer_guest -%} {{ 'customer.your_account' | t }} {{ 'customer.log_in' | t }} {%- endcapture -%} {%- endif -%}
{%- endcapture -%}

{%- capture user_account_drawer -%}

{{ user_account_drawer_customer }} {{ user_account_drawer_guest }}
{%- endcapture -%} {%- endif -%}

{%- capture header_localization -%}
{%- if section.settings.show_language_selector or section.settings.show_currency_selector -%}

{%- if section.settings.show_currency_selector and localization.available_countries.size > 1 -%} {{ localization.country | image_url: width: 24, height: 24 | image_tag: widths: '350', sizes: '100vw', class: 'country-list--flag br-50p of-cover h-100', loading: 'lazy', fetchpriority: 'auto', decoding: 'async' }} {{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }} {{ icon_chevron_down }} {%- endif -%} {%- if section.settings.show_language_selector and localization.available_languages.size > 1 -%} {{ localization.language.iso_code | upcase }} {{ icon_chevron_down }} {% endif %}
{%- endif -%} {%- endcapture -%}

{%- capture header_search -%}

{{ icon_search }} {% unless section.settings.enable_drawer %} {% if section.settings.logo_position == 'top-center' %} {{ header_localization }} {% endif %} {% endunless %}
{%- endcapture -%}

{% liquid
if settings.cart_type == ‘drawer’
render ‘cart-drawer’
endif
%}

{% unless section.settings.enable_drawer %} {% if section.settings.logo_position == 'top-center' %} {{ header_search }} {% endif %} {% endunless %}
{%- render 'icon-hamburger-menu', class: 'icon-hamburger' -%} {{ header_logo }}
    {% for block in section.blocks %} {% case block.type %} {% when 'collections_menu' %} {%- liquid assign lg = 12.0 | divided_by : block.settings.items_per_row_on_desktop if section.settings.enable_drawer == true assign lg = 6 endif -%} {% if block.settings.header_collection_title != blank %}
  • {{ block.settings.header_collection_title | escape }} {{ icon_chevron_down }}
      {% for collection in block.settings.collection_list %}
    • {% render 'card-collection', collection: collection, media_ratio: '1/1', overlay_opacity: settings.overlay_opacity, section: section, is_first: false %}
      • {% endfor %}
    • {% endif %} {% endcase %} {% endfor %} {% for link in section.settings.menu.links %} {% assign mega_menu = false %} {% for block in section.blocks %} {% case block.type %} {% when 'mega_menu' %} {% liquid assign mega_menu_name = block.settings.menu_item_name | downcase | strip assign link_anchor_name = link.title | downcase | strip if mega_menu_name == link_anchor_name and section.settings.enable_drawer == false assign mega_menu = true assign promo_block = block endif %} {% endcase %} {% endfor %}
  • {%- if link.links.size > 0 -%}
    {{ link.title }} {{ icon_chevron_down }} {%- if mega_menu -%}
      {%- for childlink in link.links -%} {% liquid assign isOpenMenuLv2 = childlink.url | slice: 0 assign target_blank_lv2 = '' if isOpenMenuLv2 != '/' and isOpenMenuLv2 != '#' and open_external_link assign target_blank_lv2 = 'target = "_blank"' endif %}
    • {%- if childlink.links != blank -%}
      {{ childlink.title }}
        {%- capture grand_child_menu -%} {%- for grandchildlink in childlink.links -%} {% liquid assign isOpenMenuLv3 = grandchildlink.url | slice: 0 assign target_blank_lv3 = '' if isOpenMenuLv3 != '/' and isOpenMenuLv3 != '#' and open_external_link assign target_blank_lv3 = 'target = "_blank"' endif %}
      • {{ grandchildlink.title }}
        • {%- endfor -%} {%- endcapture -%} {{ grand_child_menu }}
      {{ childlink.title }} {{ icon_chevron_down }}
        {{ grand_child_menu }}
      {%- else -%} {{ childlink.title }} {%- endif -%}
      • {%- endfor -%}
    {%- if promo_block.settings.primary_image -%}
    {%- liquid assign primary_image_alt = promo_block.settings.primary_image.image.alt | default: promo_block.settings.primary_image.image | split: '/' | last assign primary_image_media = promo_block.settings.primary_image | image_url: width: 400 | image_tag: alt: primary_image_alt, class: 'h-100 w-100 of-cover media js-image-lazy ' render 'image', image_item: primary_image_media, ratio: 'auto', image_wrap_classes: 'h-100 w-100', image_classes: 'w-100 h-100' -%}
    {{- promo_block.settings.primary_heading -}}
    {%- endif -%} {%- if promo_block.settings.secondary_image -%}
    {%- liquid assign secondary_image_media_alt = promo_block.settings.secondary_image.image.alt | default: promo_block.settings.secondary_image.image | split: '/' | last assign secondary_image_media = promo_block.settings.secondary_image | image_url: width: 400 | image_tag: alt: secondary_image_media_alt, class: 'h-100 w-100 of-cover media js-image-lazy ' render 'image', image_item: secondary_image_media, ratio: '3/2', image_wrap_classes: 'h-100 w-100', image_classes: 'w-100 h-100' -%}
    {{- promo_block.settings.secondary_heading -}}
    {%- endif -%}
    {% else %}
      {%- for childlink in link.links -%}
    • {%- if childlink.links != blank -%}
      {{ childlink.title }} {{ icon_chevron_down }}
        {%- for grandchildlink in childlink.links -%} {% liquid assign isOpenMenuLv3 = grandchildlink.url | slice: 0 assign target_blank_lv3 = '' if isOpenMenuLv3 != '/' and isOpenMenuLv3 != '#' and open_external_link assign target_blank_lv3 = 'target = "_blank"' endif %}
      • {{ grandchildlink.title }}
        • {%- endfor -%}
      {%- else -%} {% liquid assign isOpenMenuLv2 = childlink.url | slice: 0 assign target_blank_lv2 = '' if isOpenMenuLv2 != '/' and isOpenMenuLv2 != '#' and open_external_link assign target_blank_lv2 = 'target = "_blank"' endif %} {{ childlink.title }} {%- endif -%}
      • {%- endfor -%}
    {%- endif -%}
    {%- else -%} {% liquid assign isOpenMenuLv1 = link.url | slice: 0 assign target_blank_lv1 = '' if isOpenMenuLv1 != '/' and isOpenMenuLv1 != '#' and open_external_link assign target_blank_lv1 = 'target = "_blank"' endif %} {{ link.title }} {%- endif -%}
    • {%- endfor -%}
{% unless section.settings.enable_drawer %} {% if section.settings.logo_position != 'top-center' %} {{ header_localization }} {% endif %} {% endunless %} {{ header_search }} {{ user_account }}
{%- liquid capture header_cart_status render 'header-cart-status', cart: cart endcapture -%} {{ header_cart_status }}
{%- render 'predictive-search', class: 'header-search o-hidden d-block p-fixed top-0 w-100 left-0 h-100v zi-9' -%} {% render 'cart-notification-panel' %}

{{ 'sections.header.drawer.title' | t }}

{%- render 'icon-close' -%}
{%- if section.settings.enable_contact %} {% render 'contact', classes: 'header__contact pt-16 mt-16 pb-32', header_style: 'mb-16 mb-sm-24', contact_class: 'r-gap-12' %} {%- endif -%}
{{ user_account_drawer }} {{ header_localization | replace: 'header__localization d-none d-flex-lg', 'header__localization d-flex' }} {%- if section.settings.enable_social -%} {% render 'socials', classes: 'header__social-list mt-24 gap-16' %} {%- endif -%}

{%- if request.page_type == ‘index’ -%}
{% assign potential_action_target = request.origin | append: routes.search_url | append: “?q={search_term_string}” %}

{%- endif -%}
{% schema %}
{
“name”: “t:sections.header.name”,
“class”: “js-section-header header-wrapper p-relative zi-4”,
“settings”: [
{
“type”: “header”,
“content”: “t:general.settings.headers.header_general.content”
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:general.settings.color_scheme.label”,
“default”: “accent-1”
},
{
“type”: “checkbox”,
“id”: “enable_drawer”,
“label”: “t:sections.header.settings.enable_drawer.label”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “enable_sticky_header”,
“label”: “t:sections.header.settings.enable_sticky.label”,
“info”: “t:sections.header.settings.enable_sticky.info”,
“default”: true
},
{
“type”: “header”,
“content”: “t:general.settings.headers.header_layout.content”
},
{
“type”: “select”,
“id”: “logo_position”,
“options”: [
{
“value”: “middle-left”,
“label”: “t:sections.header.settings.menu_position.options__1.label”
},
{
“value”: “top-left”,
“label”: “t:sections.header.settings.menu_position.options__3.label”
},
{
“value”: “middle-center”,
“label”: “t:sections.header.settings.menu_position.options__4.label”
},
{
“value”: “top-center”,
“label”: “t:sections.header.settings.menu_position.options__2.label”
}
],
“default”: “middle-left”,
“label”: “t:sections.header.settings.menu_position.label”
},
{
“type”: “header”,
“content”: “t:general.settings.headers.header_logo.content”
},
{
“type”: “image_picker”,
“id”: “logo”,
“label”: “t:general.settings.image.label”
},
{
“type”: “range”,
“id”: “logo_width”,
“label”: “t:general.settings.logo_width_desktop.label”,
“min”: 40,
“max”: 200,
“step”: 10,
“default”: 140,
“unit”: “px”
},
{
“type”: “range”,
“id”: “logo_width_mobile”,
“label”: “t:general.settings.logo_width_mobile.label”,
“min”: 40,
“max”: 140,
“step”: 10,
“default”: 70,
“unit”: “px”
},
{
“type”: “header”,
“content”: “t:sections.header.settings.headers.header_navigation.content”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “main-menu”,
“label”: “t:general.settings.menu.label”
},
{
“type”: “checkbox”,
“id”: “open_external_link”,
“label”: “t:general.settings.open_external_link.label”,
“default”: false
},
{
“type”: “header”,
“content”: “t:general.settings.headers.header_currency_selector.content”,
“info”: “t:general.settings.headers.header_currency_selector.info”
},
{
“type”: “checkbox”,
“id”: “show_currency_selector”,
“label”: “t:general.settings.show_currency_selector.label”,
“default”: true
},
{
“type”: “header”,
“content”: “t:general.settings.headers.header_language_selector.content”,
“info”: “t:general.settings.headers.header_language_selector.info”
},
{
“type”: “checkbox”,
“id”: “show_language_selector”,
“label”: “t:general.settings.show_language_selector.label”,
“default”: true
},
{
“type”: “header”,
“content”: “t:general.settings.headers.header_contact_information.content”,
“info”: “t:general.settings.headers.header_contact_information.info”
},
{
“type”: “checkbox”,
“id”: “enable_contact”,
“label”: “t:general.settings.enable_contact.label”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “enable_social”,
“label”: “t:general.settings.enable_social.label”,
“default”: true
},
{
“type”: “header”,
“content”: “t:sections.header.settings.headers.header_transparent.content”
},
{
“type”: “checkbox”,
“id”: “enable_transparent”,
“label”: “t:sections.header.settings.header_transparent.enable_transparent.label”,
“default”: true
},
{
“type”: “image_picker”,
“id”: “logo_transparent”,
“label”: “t:general.settings.logo_image.label”,
“info”: “t:sections.header.settings.header_transparent.logo_transparent.info”
},
{
“type”: “color”,
“id”: “transparent_text_color”,
“label”: “t:sections.header.settings.transparent_content.label”,
“default”: “#FFFFFF”
}
],
“blocks”: [
{
“name”: “t:sections.header.blocks.mega_menu.name”,
“type”: “mega_menu”,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:sections.header.blocks.mega_menu.settings.paragraph.content”
},
{
“type”: “text”,
“id”: “menu_item_name”,
“label”: “t:sections.header.blocks.mega_menu.settings.menu_item_name.label”,
“info”: “t:sections.header.blocks.mega_menu.settings.menu_item_name.info”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.mega_menu.settings.headers.promotional_content_1.content”
},
{
“type”: “image_picker”,
“id”: “primary_image”,
“label”: “t:general.settings.image.label”,
“info”: “t:sections.header.blocks.mega_menu.settings.image.info”
},
{
“type”: “text”,
“id”: “primary_heading”,
“label”: “t:general.settings.heading.label”,
“default”: “Heading”
},
{
“type”: “url”,
“id”: “primary_link”,
“label”: “t:general.settings.link.label”
},
{
“type”: “range”,
“unit”: “%”,
“max”: 90,
“min”: 0,
“step”: 1,
“default”: 30,
“id”: “image_overlay_opacity_first”,
“label”: “t:general.settings.overlay_opacity.label”
},
{
“type”: “header”,
“content”: “t:sections.header.blocks.mega_menu.settings.headers.promotional_content_2.content”
},
{
“type”: “image_picker”,
“id”: “secondary_image”,
“label”: “t:general.settings.image.label”,
“info”: “t:sections.header.blocks.mega_menu.settings.image.info”
},
{
“type”: “text”,
“id”: “secondary_heading”,
“label”: “t:general.settings.heading.label”,
“default”: “Heading”
},
{
“type”: “url”,
“id”: “secondary_link”,
“label”: “t:general.settings.link.label”
},
{
“type”: “range”,
“unit”: “%”,
“max”: 90,
“min”: 0,
“step”: 1,
“default”: 30,
“id”: “image_overlay_opacity_second”,
“label”: “t:general.settings.overlay_opacity.label”
}
]
},
{
“name”: “t:sections.header.blocks.collections_menu.name”,
“type”: “collections_menu”,
“settings”: [
{
“type”: “header”,
“content”: “t:general.settings.headers.header_general.content”
},
{
“type”: “text”,
“id”: “header_collection_title”,
“label”: “t:sections.header.blocks.collections_menu.settings.heading.label”,
“info”: “t:sections.header.blocks.collections_menu.settings.heading.info”,
“default”: “Collection browsing”
},
{
“type”: “collection_list”,
“id”: “collection_list”,
“label”: “t:general.settings.selected_collections.label”
},
{
“type”: “header”,
“content”: “t:general.settings.headers.header_layout.content”
},
{
“type”: “range”,
“id”: “items_per_row_on_desktop”,
“min”: 4,
“max”: 6,
“step”: 1,
“label”: “t:sections.logo_list.settings.items_per_row_on_desktop.label”,
“default”: 5
}
]
}
]
}
{% endschema %}

2

Hi @xhastine ,

Could you share your store url? I will help to check it.