Re: Dropdown navigation menu does not work

Solved

Why isn't my dropdown navigation menu functioning?

ginetteshop
New Member
12 0 0

Hi, 

 

Trying to add a dropdown menu under collections in the main navigation menu. When clicked, nothing happens, not showing and not linked. 

Can you help? 

Thank you

 

https://ginette.shop/

Accepted Solutions (2)

Lilith
Shopify Staff
603 73 186

This is an accepted solution.

Hi, @ginetteshop!


My name is Lilith, I'm on the Social Care team at Shopify.

 

I went in to check how your dropdown menu is doing:

 

 

alt

 

 

It appears that you've got it working at this time. Did you manage to correct the code in your theme that was causing this for you?

 

Whenever you do any code changes and something isn't quite working well, you can also revert the theme code back to the last version or original version.

 

Here's a guide on how to do that if you ever need a temporary quick fix for any code issues. The steps are just in the last few steps on how to revert the theme code.

 

I'm happy to answer any questions you think of as you work on your business.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Lilith
Shopify Staff
603 73 186

This is an accepted solution.

Thanks for trying that, @thebeadfarm! Since you're using our Shopify Debut theme, what we're going to need to do is dive into your theme to see what is happening. As long as you haven't done any code changes or any apps that modified your code, we can have our theme specialists take a peek. To do that we will need to escalate a ticket to that team.

To open a new ticket we’ll need to access your account in order to resolve this issue. While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit https://bit.ly/3cJkx8V and log in to your account to create a support request.

In order to save some time, and help the Support Advisor you speak with to pick up from where you and I have left off, I am going to provide you with a summary of the issue as I understand it. You can share this summary at the beginning of your conversation with the agent to bring you both up to speed and help to get your answers as quickly as possible.

Issue Summary: Debut theme's drop-down menus not expanding as expected

Once the escalated ticket is in the queue for the escalated team, you'll be in touch with our theme specialists via email.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

View solution in original post

Replies 46 (46)

oscprofessional
Shopify Partner
16115 2409 3123

Hello @ginetteshop,

Did you do changes in code??

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
ginetteshop
New Member
12 0 0

Hi, 

 

Thank you for responding.

I did changed some lines but nothing concerning the menu.

ginetteshop
New Member
12 0 0

I will set the menu as it's not working then you can realizImage2.png

oscprofessional
Shopify Partner
16115 2409 3123

@ginetteshop,

Can you DM me your header.liquid file

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
ginetteshop
New Member
12 0 0

{% if section.settings.message %}
<style>
{% if section.settings.logo != blank %}
.site-header__logo-image {
max-width: {{ section.settings.logo_max_width | escape }}px;
}
{% endif %}

{% if section.settings.align_logo == 'left' %}
.site-header__logo-image {
margin: 0;
}
{% endif %}
</style>
{% endif %}

<div data-section-id="{{ section.id }}" data-section-type="header-section">
{% if section.settings.message %}
{% if section.settings.home_page_only == false or template.name == 'index' %}
<style>
.announcement-bar {
background-color: {{ section.settings.color_bg }};
}

.announcement-bar--link:hover {
{% assign brightness = section.settings.color_bg | color_brightness %}

{% if brightness <= 192 %}
{% assign lightenAmount = 255 | minus: brightness | divided_by: 255 | times: 16 %}
background-color: {{ section.settings.color_bg | color_lighten: lightenAmount }};
{% else %}
{% assign darkenAmount = 255 | divided_by: brightness | times: 8 %}
background-color: {{ section.settings.color_bg | color_darken: darkenAmount }};
{% endif %}
}

.announcement-bar__message {
color: {{ section.settings.color_text }};
}
</style>

{% if section.settings.message_link == blank %}
<div class="announcement-bar">
{% else %}
<a href="{{ section.settings.message_link }}" class="announcement-bar announcement-bar--link">
{% endif %}

<p class="announcement-bar__message">{{ section.settings.message_text | escape }}</p>

{% if section.settings.message_link == blank %}
</div>
{% else %}
</a>
{% endif %}

{% endif %}
{% endif %}

<header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">
<div class="grid grid--no-gutters grid--table site-header__mobile-nav">
{% if section.settings.align_logo == 'center' %}
{%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%}
{% else %}
{%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
{% endif %}

<div class="grid__item {{ logo_classes }}">
{% comment %}
Use the uploaded logo from theme settings if enabled.
Site name gets precedence with H1 tag on homepage, div on other pages.
{% endcomment %}
{% if template.name == 'index' %}
<h1 class="h2 site-header__logo">
{% else %}
<div class="h2 site-header__logo">
{% endif %}
{% if section.settings.logo %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<img class="lazyload js"
src="{{ section.settings.logo | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ logo_alt | escape }}"
style="max-width: {{ section.settings.logo_max_width }}px">
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}"
style="max-width: {{ section.settings.logo_max_width }}px;">
</noscript>
</a>
{% else %}
<a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
{% endif %}
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>

{% if section.settings.align_logo == 'left' %}
<nav class="grid__item medium-up--one-half small--hide" id="AccessibleNav" role="navigation">
{% include 'site-nav' %}
</nav>
{% endif %}

<div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
<div class="site-header__icons-wrapper">
<div class="site-header__search site-header__icon">
{% include 'search-form' %}
</div>

<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
</button>

{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
{% include 'icon-login' %}
<span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
</a>
{% else %}
<a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
{% include 'icon-login' %}
<span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
</a>
{% endif %}
{% endif %}

<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
{% include 'icon-cart' %}
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
<div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %}" data-cart-count-bubble>
<span data-cart-count>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
</div>
</a>

{% if shop.enabled_currencies.size > 1 %}
{% form 'currency', class: "currency-selector small--hide" %}
<label for="CurrencySelector" class="visually-hidden">{{ 'general.currency.dropdown_label' | t }}</label>
<div class="currency-selector__input-wrapper select-group">
<select name="currency" id="CurrencySelector" class="currency-selector__dropdown" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-currency-selector>
{% for currency in shop.enabled_currencies %}
<option value="{{currency.iso_code}}"{% if currency == cart.currency %} selected="true"{% endif %}>{{currency.iso_code}}</option>
{% endfor %}
</select>
{% include 'icon-chevron-down' %}
</div>
{% endform %}
{% endif %}

{% unless linklists[section.settings.main_linklist] == blank %}
<button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav" aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
{% include 'icon-hamburger' %}
{% include 'icon-close' %}
</button>
{% endunless %}
</div>

</div>
</div>

<nav class="mobile-nav-wrapper medium-up--hide" role="navigation">
<ul id="MobileNav" class="mobile-nav">
{% for link in linklists[section.settings.main_linklist].links %}
{%- assign outerLoopIndex = forloop.index -%}

<li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
{% if link.links != blank %}
{% capture child_list_handle %}{{ link.handle }}-{{ outerLoopIndex }}{% endcapture %}
<button type="button" class="btn--link js-toggle-submenu mobile-nav__link{% if link.child_active %} mobile-nav__link--active{% endif %}" data-target="{{ child_list_handle }}" data-level="1" aria-expanded="false">
<span class="mobile-nav__label">{{ link.title | escape }}</span>
<div class="mobile-nav__icon">
{% include 'icon-chevron-right' %}
</div>
</button>
<ul class="mobile-nav__dropdown" data-parent="{{ child_list_handle }}" data-level="2">
<li class="visually-hidden" tabindex="-1" data-menu-title="2">
{{- link.title }} {{ 'layout.navigation.menu' | t -}}
</li>
<li class="mobile-nav__item border-bottom">
<div class="mobile-nav__table">
<div class="mobile-nav__table-cell mobile-nav__return">
<button class="btn--link js-toggle-submenu mobile-nav__return-btn" type="button" aria-expanded="true" aria-label="{{ link.title }}">
{% include 'icon-chevron-left' %}
</button>
</div>
<span class="mobile-nav__sublist-link mobile-nav__sublist-header mobile-nav__sublist-header--main-nav-parent">
<span class="mobile-nav__label">{{ link.title | escape }}</span>
</span>
</div>
</li>

{% for childlink in link.links %}
<li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
{% if childlink.links != blank %}
{% capture grandchild_list_handle %}{{ childlink.handle }}-{{ outerLoopIndex }}-{{ forloop.index }}{% endcapture %}
<button type="button" class="btn--link js-toggle-submenu mobile-nav__link mobile-nav__sublist-link" data-target="{{ grandchild_list_handle }}" aria-expanded="false">
<span class="mobile-nav__label">{{ childlink.title | escape }}</span>
<div class="mobile-nav__icon">
{% include 'icon-chevron-right' %}
</div>
</button>
<ul class="mobile-nav__dropdown" data-parent="{{ grandchild_list_handle }}" data-level="3">
<li class="visually-hidden" tabindex="-1" data-menu-title="3">
{{- childlink.title }} {{ 'layout.navigation.menu' | t -}}
</li>
<li class="mobile-nav__item border-bottom">
<div class="mobile-nav__table">
<div class="mobile-nav__table-cell mobile-nav__return">
<button type="button" class="btn--link js-toggle-submenu mobile-nav__return-btn" data-target="{{ child_list_handle }}" aria-expanded="true" aria-label="{{ childlink.title }}">
{% include 'icon-chevron-left' %}
</button>
</div>
<a href="{{ childlink.url }}"
class="mobile-nav__sublist-link mobile-nav__sublist-header"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ childlink.title | escape }}</span>
</a>
</div>
</li>
{% for grandchildlink in childlink.links %}
<li class="mobile-nav__item{% unless forloop.last %} border-bottom{% endunless %}">
<a href="{{ grandchildlink.url }}"
class="mobile-nav__sublist-link"
{% if grandchildlink.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ grandchildlink.title | escape }}</span>
</a>
</li>
{% endfor %}
</ul>
{% else %}
<a href="{{ childlink.url }}"
class="mobile-nav__sublist-link"
{% if childlink.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ childlink.title | escape }}</span>
</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<a href="{{ link.url }}"
class="mobile-nav__link{% if link.active %} mobile-nav__link--active{% endif %}"
{% if link.current %} aria-current="page"{% endif %}
>
<span class="mobile-nav__label">{{ link.title | escape }}</span>
</a>
{% endif %}
</li>
{% endfor %}
{% if shop.enabled_currencies.size > 1 %}
<li class="mobile-nav__item border-top">
{% form 'currency', class: "currency-selector" %}
<label for="CurrencySelectorMobile" class="currency-selector__label">{{ 'general.currency.dropdown_label' | t }}</label>
<div class="currency-selector__input-wrapper select-group">
<select name="currency" id="CurrencySelectorMobile" class="currency-selector__dropdown" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-currency-selector>
{% for currency in shop.enabled_currencies %}
<option value="{{currency.iso_code}}"{% if currency == cart.currency %} selected="true"{% endif %}>{{currency.iso_code}}</option>
{% endfor %}
</select>
{% include 'icon-chevron-down' %}
</div>
{% endform %}
</li>
{% endif %}
</ul>
</nav>
</header>

{% if section.settings.align_logo == 'center' %}
<nav class="small--hide border-bottom" id="AccessibleNav" role="navigation">
{% include 'site-nav', nav_alignment: 'site-nav--centered' %}
</nav>
{% endif %}
</div>

 

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
{% if section.settings.logo %}
{% assign image_size = section.settings.logo.width | append:'x' %}
"logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
{% endif %}
"sameAs": [
{{ settings.social_twitter_link | json }},
{{ settings.social_facebook_link | json }},
{{ settings.social_pinterest_link | json }},
{{ settings.social_instagram_link | json }},
{{ settings.social_tumblr_link | json }},
{{ settings.social_snapchat_link | json }},
{{ settings.social_youtube_link | json }},
{{ settings.social_vimeo_link | json }}
],
"url": {{ shop.url | append: page.url | json }}
}
</script>

{% if template.name == 'index' %}
{% assign potential_action_target = shop.url | append: "{{ routes.search_url }}?q={search_term_string}" %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": {{ shop.name | json }},
"potentialAction": {
"@type": "SearchAction",
"target": {{ potential_action_target | json }},
"query-input": "required name=search_term_string"
},
"url": {{ shop.url | append: page.url | json }}
}
</script>
{% endif %}

{% schema %}
{
"name": {
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fr": "En-tête",
"it": "Header",
"ja": "ヘッダー",
"nl": "Koptekst",
"pt-BR": "Cabeçalho",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "radio",
"id": "align_logo",
"label": {
"de": "Logo-Ausrichtung",
"en": "Logo alignment",
"es": "Alineación de logotipo",
"fr": "Alignement du logo",
"it": "Allineamento logo",
"ja": "ロゴアラインメント",
"nl": "Logo-uitlijning",
"pt-BR": "Alinhamento do logotipo",
"zh-CN": "logo 对齐方式",
"zh-TW": "商標對齊"
},
"default": "left",
"options": [
{
"value": "left",
"label": {
"de": "Links",
"en": "Left",
"es": "Izquierda",
"fr": "Gauche",
"it": "Sinistra",
"ja": "左",
"nl": "Links",
"pt-BR": "Esquerda",
"zh-CN": "左侧",
"zh-TW": "左方"
}
},
{
"value": "center",
"label": {
"de": "Mittig",
"en": "Centered",
"es": "Centrada",
"fr": "Centré",
"it": "Centrato",
"ja": "中央揃え",
"nl": "Gecentreerd",
"pt-BR": "Centralizado",
"zh-CN": "居中",
"zh-TW": "置中"
}
}
]
},
{
"type": "image_picker",
"id": "logo",
"label": {
"de": "Logo-Foto",
"en": "Logo image",
"es": "Logotipo",
"fr": "Image du logo",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"nl": "Afbeelding van logo",
"pt-BR": "Imagem do logotipo",
"zh-CN": "logo 图片",
"zh-TW": "標誌圖片"
}
},
{
"type": "range",
"id": "logo_max_width",
"label": {
"de": "Logobreite",
"en": "Custom logo width",
"es": "Ancho del logotipo personalizado",
"fr": "Largeur personnalisée du logo",
"it": "Larghezza logo personalizzato",
"ja": "ロゴの幅をカスタムする",
"nl": "Aangepaste logo-breedte",
"pt-BR": "Largura do logotipo personalizado",
"zh-CN": "自定义 logo 宽度",
"zh-TW": "自訂商標寬度"
},
"min": 50,
"max": 250,
"step": 5,
"unit": {
"de": "px",
"en": "px",
"es": "px",
"fr": "px",
"it": "px",
"ja": "px",
"nl": "px",
"pt-BR": "px",
"zh-CN": "px",
"zh-TW": "像素"
},
"default": 100
},
{
"type": "link_list",
"id": "main_linklist",
"label": {
"de": "Menü",
"en": "Menu",
"es": "Menú",
"fr": "Menu",
"it": "Menu",
"ja": "メニュー",
"nl": "Menu",
"pt-BR": "Menu",
"zh-CN": "菜单",
"zh-TW": "選單"
},
"default": "main-menu"
},
{
"type": "header",
"content": {
"de": "Ankündigungsbereich",
"en": "Announcement bar",
"es": "Barra de anuncios",
"fr": "Barre d'annonces",
"it": "Barra degli annunci",
"ja": "告知バー",
"nl": "Aankondigingsbalk",
"pt-BR": "Barra de anúncios",
"zh-CN": "公告栏",
"zh-TW": "公告列"
}
},
{
"type": "checkbox",
"id": "message",
"label": {
"de": "Ankündigung anzeigen",
"en": "Show announcement",
"es": "Mostrar anuncio",
"fr": "Afficher l'annonce",
"it": "Mostra annuncio",
"ja": "告知を表示する",
"nl": "Aankondiging weergeven",
"pt-BR": "Exibir anúncio",
"zh-CN": "显示公告",
"zh-TW": "顯示公告"
},
"default": false
},
{
"type": "checkbox",
"id": "home_page_only",
"label": {
"de": "Nur Startseite",
"en": "Home page only",
"es": "Solo página de inicio",
"fr": "Page d'accueil uniquement",
"it": "Solo home page",
"ja": "ホームページのみ",
"nl": "Alleen startpagina",
"pt-BR": "Apenas página inicial",
"zh-CN": "仅主页",
"zh-TW": "僅限首頁"
},
"default": true
},
{
"type": "text",
"id": "message_text",
"label": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"de": "Hier etwas ankündigen",
"en": "Announce something here",
"es": "Anuncia algo aquí",
"fr": "Annoncez quelque chose ici",
"it": "Annuncia qualcosa qui",
"ja": "ここで告知してください",
"nl": "Kondig hier iets aan",
"pt-BR": "Anuncie algo aqui",
"zh-CN": "在此处进行公告",
"zh-TW": "在此公告資訊"
}
},
{
"type": "url",
"id": "message_link",
"label": {
"de": "Link",
"en": "Link",
"es": "Enlace",
"fr": "Lien",
"it": "Link",
"ja": "リンク",
"nl": "Link",
"pt-BR": "Link",
"zh-CN": "链接",
"zh-TW": "連結"
},
"info": {
"de": "Optional",
"en": "Optional",
"es": "Opcional",
"fr": "Facultatif",
"it": "Facoltativo",
"ja": "選択させる",
"nl": "Optioneel",
"pt-BR": "Opcional",
"zh-CN": "可选",
"zh-TW": "(選填)"
}
},
{
"type": "color",
"id": "color_bg",
"label": {
"de": "Zeile",
"en": "Bar",
"es": "Barra",
"fr": "Barre",
"it": "Barra",
"ja": "バー",
"nl": "Balk",
"pt-BR": "Barra",
"zh-CN": "栏",
"zh-TW": "橫條"
},
"default": "#7796a8"
},
{
"type": "color",
"id": "color_text",
"label": {
"de": "Text",
"en": "Text",
"es": "Texto",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"nl": "Tekst",
"pt-BR": "Texto",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": "#fff"
}
]
}
{% endschema %}

Lilith
Shopify Staff
603 73 186

This is an accepted solution.

Hi, @ginetteshop!


My name is Lilith, I'm on the Social Care team at Shopify.

 

I went in to check how your dropdown menu is doing:

 

 

alt

 

 

It appears that you've got it working at this time. Did you manage to correct the code in your theme that was causing this for you?

 

Whenever you do any code changes and something isn't quite working well, you can also revert the theme code back to the last version or original version.

 

Here's a guide on how to do that if you ever need a temporary quick fix for any code issues. The steps are just in the last few steps on how to revert the theme code.

 

I'm happy to answer any questions you think of as you work on your business.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

ginetteshop
New Member
12 0 0

Thank you for checking. I fixed it saturday.

Lilith
Shopify Staff
603 73 186

I'm thrilled to hear it's been fixed! Thank you so much for the update on that. Happy selling!

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Reallytrendy
Tourist
5 0 2

My dropdown navigation button "products" in the main menu is not clickable, it does not work. and my side bar in a phone device is not working as well. please I am looking for any solutions

Thank you,

jack0five
Excursionist
13 0 6

Exactly same issue since yesterday??!!! 

Everything working fine before and no changes made!! 

 

Shopify Team : find a solution! We pay for an app which is supposed to work! 

jack0five
Excursionist
13 0 6

Why it dors not work well no more?! 

Zworthkey
Shopify Partner
5581 642 1578

@jack0five 
What Are you looking for?

Is your Dropdown menu is not working?
How may I help you?

 

jack0five
Excursionist
13 0 6

Exactly! 

Always worked fine and does no more drowing down on mobiles since yesterday!! Issue only on home page?!! 

Zworthkey
Shopify Partner
5581 642 1578

Kindly you share your Store Url

jack0five
Excursionist
13 0 6

mototrust.net

Thanks!

jack0five
Excursionist
13 0 6

Exactly! 

Always worked fine and does no more drowing down on mobiles since yesterday!! Issue only on home page?!! 

BARE
Visitor
1 0 0

Hi, 

I’m having exactly the same issue can somebody please help me rectify this! 

thank you. 

Lilith
Shopify Staff
603 73 186

@BARE have you tried the solutions in the thread to help resolve your navigation situation? If you had working navigation as the original poster had and suddenly don't this is usually caused by a new app or new code in your theme. Aside from disabling your new app or seeing if other themes in your account encounter the same issue, here's a quick reference list of the tips and solutions in the thread:

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

andregraf
Visitor
2 0 0

Hi,

I'm having the same exact issue. I tried to follow your previous steps but since I haven't purchased the theme yet, I cannot edit the code of it.

The theme name is Icon.

Here is the link to the actual theme example, it does not even work there.

https://themes.shopify.com/themes/icon/styles/dolce/preview

I can send you my website link as well but I would rather send it privately since my logo and other information are already on it.

Thanks for your assistance,

Andre

Lilith
Shopify Staff
603 73 186

@andregraf Since you're using a third-party theme and haven't purchased it to access the code, there isn't a lot you can do to fix your trial theme. If you've already taken a look at the solution tips in the thread you can then check if you installed a new app. You can remove the app and see if that helps. Otherwise, you'll need to purchase that theme to work on the code as that is the only way you can fix code issues on a theme. Another thing to remember is that if it's a third-party theme (not free) you'll need to contact the developer of the theme to get support for it after you purchase it.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

andregraf
Visitor
2 0 0

Thank you, I did not know that Shopify was not responsible for the themes that you sell in your store. Thank you for letting me know that.

thebeadfarm
Visitor
3 0 0

Hi, I'm new to Shopify Community.  I am looking for someone to help me with this same problem.  My main menu dropdown lists are not working at all.  This began after I changed some code.  I went back and reversed what I had done.  But the problem continues.  I saw the recommendation to revert to older versions of my theme- I did that and still have issues with the dropdown lists not working from my main menu.  
Can you help me?

 

Lilith
Shopify Staff
603 73 186

@thebeadfarm Thanks for trying out the suggestions in the thread. If the navigation was working before, have you downloaded a new copy of the theme (without changing anything on it) and tested to see if the same issue is happening with a clean copy?

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

thebeadfarm
Visitor
3 0 0
Can you tell me how to do that without getting into even worse trouble? I
do not want to have to set up my website all over again!

Lilith
Shopify Staff
603 73 186

@thebeadfarm of course! No problem. It's very simple to do and won't affect your current site. In your Themes section of your admin, you'll see the name of your themes. If you've renamed them, you can see what the theme's original file name was by going to Customize > Theme actions. It will look similar to this:

 

05-11-foayt-j83oj

 

Once you have the name of the theme you can download a new copy in the theme store.

When you download any new themes to your account, none of them will replace the one you have published. What will happen is that they will show up in your Themes section so you can edit and work on them freely before you publish them. So you can test things out with any themes in there without worrying that they will show up live on your site. If you want to publish one of them as your official site theme you can follow the steps here to do that, but you won't see that theme on your site until you follow those specific steps.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

thebeadfarm
Visitor
3 0 0
Hi again. I did upload a fresh copy of Debut theme. The drop downs in the
main menu didn't work with it either. When I click on a menu item that has
a drop down list, nothing happens at all.

I ended up removing the drop down lists by deleting collections under main
menu items. Now I am at least able to click on the main menu items (that
used to have drop down lists) and see all the products in that menu even
though they are no longer categorized by collections.

I tried adding a one collection to one main menu item again to see if it
would work. It did not. Same as before. The one main menu item that had
a drop down list doesn't do a thing when clicking on it.

Now what?
Becky
Lilith
Shopify Staff
603 73 186

This is an accepted solution.

Thanks for trying that, @thebeadfarm! Since you're using our Shopify Debut theme, what we're going to need to do is dive into your theme to see what is happening. As long as you haven't done any code changes or any apps that modified your code, we can have our theme specialists take a peek. To do that we will need to escalate a ticket to that team.

To open a new ticket we’ll need to access your account in order to resolve this issue. While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit https://bit.ly/3cJkx8V and log in to your account to create a support request.

In order to save some time, and help the Support Advisor you speak with to pick up from where you and I have left off, I am going to provide you with a summary of the issue as I understand it. You can share this summary at the beginning of your conversation with the agent to bring you both up to speed and help to get your answers as quickly as possible.

Issue Summary: Debut theme's drop-down menus not expanding as expected

Once the escalated ticket is in the queue for the escalated team, you'll be in touch with our theme specialists via email.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

femformapparel
Tourist
10 0 0

were you able to find a resolution? I'm having the same issue and don't want to revert my code due to the code fixing another issue I had.

Lilith
Shopify Staff
603 73 186

Hi, @femformapparel! Do you recall what theme you're using? Are you on Debut? I know you don't want to try to revert the code, however, you can always push it back to what it is now if you need to. The reason that rolling back the code helps is that it assists in pinpointing which changes could have caused it to interfere with the function of your site. The code can be rolled back or forward to any date or time that the code changes were saved.

Let me know which theme you're using and I can help with recommending next steps.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

femformapparel
Tourist
10 0 0
I am using Debut. 🙂 I believe changing the collection text to be invisible
over the images is what caused it. But if I reverse that, I’ll have fixed
the other issues and still be left with the collection text
femformapparel
Tourist
10 0 0

Hello, I am using Debut theme. I reversed ALL changes and am still having the same issue with transparency not being behind my images and with my drop down links no longer working. 😞

Lilith
Shopify Staff
603 73 186

@femformapparel Thanks for testing things out. You can roll it forward to what you had before testing it. Our team would need to take a closer look at what you have in your theme, keep in mind that if someone other than a Shopify developer made any code changes we may not be able to fix that for you, but the team can make some more specific recommendations on what will help fix this. Reach out to our live support so they can see what's happening.

We’ll need to access your account in order to check all that out. While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit https://bit.ly/3cJkx8V and log in to your account to create a support request.

In order to save some time, and help the Support Advisor you speak with to pick up from where you and I have left off, I am going to provide you with a summary of the issue as I understand it. You can share this summary at the beginning of your conversation with the agent to bring you both up to speed and help to get your answers as quickly as possible.

  • Issue Summary: Customized code interfering with original theme navigation links.
  • Other note to mention: Let the advisor know exactly when the changes were made that caused this issue.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

zada369
Visitor
1 0 0

My dropdown menue just flickers, and won't let me select anything.

 

LaraCD
Tourist
6 0 1

Hi,

I am having the same issue - How did you solve it?

Thank you

Lilith
Shopify Staff
603 73 186

Hi @LaraCD one of the things that caused the issue in the OP's store was rogue code that was interfering with their theme build.

Have you installed any apps or had someone edit the code for your theme since you started seeing the issue? If so, you can use the method in my post above to revert that code back to before the issue started.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

eddyzp
Excursionist
23 0 7

hi

 

i have same issue, did you make it work?

 

please, advise

Lilith
Shopify Staff
603 73 186

@eddyzp To help give you some idea on what causes this and how to solve, you can check on this post here. Have you had a chance to try out some of the tips in the thread?

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

lanal24
Excursionist
14 0 4

Is someone able to help me with this? I don't want to revert back to the original code because the other changes made are helpful, however the "Shop" drop down won't open. 

Any suggestions? 

URL is zibo.com.au Password: shopzibo321

Lilith
Shopify Staff
603 73 186

Hi @lanal24 It appears you were able to get that sorted. I see that your site has a functioning dropdown menu:

 

 

If you find yourself needing to check which code is causing any issues in your theme in the future, I would recommend creating a duplicate of your theme that you can troubleshoot on so as to not change the live site.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

monTFury
Tourist
6 0 0

Hello! i have similar problem on mobile mod (customize and actual site)..

my top left main menu doesn't open when i tap it and same for the cart icon..

when i press them nothing happen and i tried to search everything in the settings..

Lilith
Shopify Staff
603 73 186

@monTFury do you have a link to your site that I can take a look at? If you download a new copy of the same theme to your account, do you get the same issue with the unresponsive clicks?

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

monTFury
Tourist
6 0 0
Narutofashion.com
And yes same with the copy..
Lilith
Shopify Staff
603 73 186

@monTFury Thanks for the URL! I can see what you mean that it's unresponsive. The theme looks like it might be a third-party theme, I don't recognize it as one of the Shopify created themes.

Do you recall the name and version of your theme? You can find it by going to Online Store > Themes > Customize > Theme Actions. It'll tell you the name and version of the theme as well as the developer that created it.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

monTFury
Tourist
6 0 0

yes 

Timzee1.0

Design and support by Design themes

and btw everything worked good a few days ago.. something happen...

 

Lilith
Shopify Staff
603 73 186

@monTFury Thanks for checking on the details of the theme. Taking another look at the URL you sent in the Chrome developer tools, it seems that there is some code that is interfering with your navigation. It looks like it could be code that was added into the theme manually or an app that was recently installed. I'm not able to see more than that without authenticating your account. Since it's a third party theme, this is beyond the scope of what Shopify support can assist with. However, there are a few things you can do to correct this. 

First thing that can help is to check on any apps that you've recently installed in case any of those have automatically modified your theme in any way.

The second thing you can do is physically check the code in your theme by going to Online Store > Themes > Actions > Edit Code. In this page you'll want to look out for any theme files that have a purple dot next to them. It'll look like this:

 

16-40-qhp2y-kxskc

 

This dot indicates any code that was edited from the original theme code. You can revert that file to a previous version using the action shown in this screenshot:

 

16-41-23i9j-wi2y6

 

When you click on that "Older versions" action it will give you a drop-down to select a previous version of the code to revert it back.

Lastly, if you'd like a bit more hands-on help, you can certainly reach out to the developer of your theme or one of the app developers for the third-party app you've installed.

Lilith | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

monTFury
Tourist
6 0 0

Narutofashion.comand yes same with the copy..