CODEWITHSUNDEEP
shopifydropdownliquidshopify-templateshopify-liquid
muhammad ali
muhammad ali

Reputation: 1

Dropdown issue in shopify theme dev

I hope you all are doing well. I am currently learning Shopify theme development, and I was working on a theme, but I encountered a glitch that I can’t figure out how to fix. The issue is with the dropdown menu – on mobile, it opens when clicked, but it doesn’t close when clicked again.

The fun fact is that when I run the code in my local environment using shopify CLI, the mobile dropdown opens and closes perfectly. However, after uploading it to Shopify, the mobile dropdown opens but doesn’t close.

This issue is beyond my understanding now, so if anyone here can help me solve it, I would be extremely grateful. Please help me!

<header class="navbar">
  <div class="logo">
    {% if section.settings.logo %}
      <a href="/">
        {{ section.settings.logo | image_url: width: 200 | image_tag }}
      </a>
    {% else %}
      <a href="/">{{ shop.name }}</a>
    {% endif %}
  </div>

  <ul class="nav-links">
    {% for link in linklists.main-menu.links %}
      <li class="{% if link.links != blank %}dropdown{% endif %}">
        <a href="{{ link.url }}">{{ link.title }}</a>
        {% if link.links != blank %}
          <ul class="dropdown-menu">
            {% for child_link in link.links %}
              <div class="dropdown-links-wrapper">
                <div class="dropdown-heading">
                  {{ child_link.title }}
                </div>
                <div class="dropdown-links">
                  {% for grandchild_link in child_link.links %}
                    <li><a href="{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li>
                  {% endfor %}
                </div>
              </div>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>

  <button class="hamburger">
    <span class="line"></span>
    <span class="line"></span>
  </button>
</header>

{% schema %}
{
  "name": "Header",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo Image"
    },
    {
      "type": "text",
      "id": "dropdown_heading",
      "label": "Dropdown Heading",
      "default": "Explore Collection"
    }
  ]
}
{% endschema %}

@font-face {
    font-family: 'ITALIC';
src:url('https://cdn.shopify.com/s/files/1/0692/4484/6253/files/4DD591D8-4168-4263-B05B-7183DDAFF1F4.TTF?v=1739773692');}

@font-face {
    font-family: 'INTER';
src:url('https://cdn.shopify.com/s/files/1/0692/4484/6253/files/INTER.TTF?v=1739773693');}

body, html {
    margin: 0;
    padding: 0;

}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #121212;
    padding: 10px 20px;
    width: fit-content;    /* width: 50% ki jagah */
    min-width: 50%;       /* minimum width set ki hai */
    max-width: 90%;  
    height: 2rem;
    white-space: nowrap;
    position: fixed;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    border-radius: 0.2rem;
    transition: transform 0.6s cubic-bezier(0.66, 0, 0.34, 1);  /* smooth 
    transition add ki */
}

.navbar.hidden {
    transform: translate(-50%, -140%);  /* navbar ko uper hide karne ke liye */
}

.logo a {
    color: #E4E3FF;
    font-size: 24px;
    font-family: ITALIC;
    font-weight: 100;
    text-decoration: none;
    display: flex;
    align-items: center;
  }

.logo img {
    width: 100%;
    max-width: 150px;  /* maximum width set ki hai */
    object-fit: contain;
}

.logo {
    overflow:hidden;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1rem;
    /* width: 100%; Ensure nav-links take full width */
    justify-content: space-between; /* Space out links evenly */
}

.nav-links a {
    color: #E4E3FF;
    text-decoration: none;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    font-family: INTER;
    font-weight: 400;
    transition: color 0.3s ease;
}

/* Desktop-only hover effects */
@media (hover: hover) and (min-width: 768px) {
    .nav-links a:hover {
        color: #8f8ef0;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    .dropdown:hover .dropdown-icon {
        transform: rotate(180deg);
    }
    
    .dropdown:hover > a::after {
        transform: translateY(-50%) rotate(180deg);
    }
}

/* Desktop view */
@media (min-width: 1024px) {
    .nav-links a {
        font-size: 1rem;
    }
}

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    height: 3px;
    width: 25px;
    background-color: #E4E3FF;
    margin: 4px 0;
}

.hero {
    background-image: url('your-image.jpg');
    background-size: cover;
    background-position: center;
    height: 200vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-content h1 {
    color: #E4E3FF;
    font-size: 60px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.dropdown-menu {
    border-radius: 0.2rem;
  
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #121212;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: scroll;
    max-height: 0;
    width: 100%;
    transition: max-height 0.8s cubic-bezier(0.66, 0, 0.34, 1), visibility 0.8s;
    z-index: 999;
    visibility: hidden;
    display: grid;
    align-items: start;
    grid-template-columns: repeat(4, 1fr);
}

.dropdown-menu::-webkit-scrollbar {
    width: 5px;
}

/* Track */
.dropdown-menu::-webkit-scrollbar-track {
    background: #333333;
}

/* Handle */
.dropdown-menu::-webkit-scrollbar-thumb {
 background: #8f8ef0;
}

.dropdown-links-wrapper{
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    width: fit-content;
    padding: 1rem 0.5rem ;
    
}

.dropdown:hover .dropdown-menu,
.dropdown-menu.active {
    max-height: 300px;
    visibility: visible;
    z-index: 1000;
}

/* Existing dropdown styles */
.dropdown > a {
    position: relative;  /* Icon positioning ke liye */
    padding-right: 20px; /* Icon ke liye space */
}

/* Dropdown icon ke liye pseudo-element */
.dropdown > a::after {
    content: "▼";
    font-size: 0.7em;
    margin-left: 8px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s cubic-bezier(0.66, 0, 0.34, 1);
}

/* Active state mein rotation */
.dropdown:hover > a::after,
.dropdown.active > a::after {
    transform: translateY(-50%) rotate(180deg);
}


/* WAPIS ADD KARO HEADING STYLES */
.dropdown-heading {
    color: #8f8ef0;
    font-size: 1.3rem;
    margin-bottom: 10px;  /* Heading aur links ke beech space ke liye */
    font-family: ITALIC;
    font-weight: lighter;
}

/* REMOVE KARO SIRF WO STYLES JO ICON SE RELATED THAY */
/* (position aur padding-right nahi add karna) */

.hamburger {
  display: none; /* Desktop par hide */
  background: transparent;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 100;
}

.line {
  display: block;
  width: 20px;
  height: 1px;
  background: #8f8ef0;
  margin: 6px 0;
  transition: 0.4s;
}

/* Mobile view show karein */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #121212;
    padding: 0;
    margin-top: 0rem;
    max-height: 0;
    overflow: scroll;
    visibility: hidden;
    border-radius: 0.2rem;
    gap: 0rem;

    transition: max-height 1s cubic-bezier(0.66, 0, 0.34, 1), visibility 1s;
  }

  .nav-links.active {
    max-height: 500px;
    visibility: visible;
  }

  .nav-links li {
    padding: 10px 20px;
  }

  .menu-toggle {
    display: flex;
  }

  .dropdown-menu {
    position: static;
    white-space: nowrap;
    display: block;
  }

  .dropdown-menu.active {
    display: block;
    max-height: 500px;
  }
  .navbar {
    padding: 10px 20px;
    min-width: 75%;     
  }
}

/* Active state animations */
.hamburger.active .line:first-child {
  transform: rotate(45deg) translate(4px, 0px);
}

.hamburger.active .line:nth-child(2) {
  transform: rotate(-45deg) translate(5px, -1px);
}

/* Hover effect for desktop */
@media (min-width: 768px) {
  .dropdown:hover .dropdown-content {
    display: block;
  }
  .dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
  }
}

/* Mobile click handling */
@media (max-width: 767px) {
  .dropdown.active .dropdown-menu {
    max-height: 500px;
    visibility: visible;
  }
  
  .dropdown.active .dropdown-icon {
    transform: rotate(180deg);
  }
}

/* Shopify Specific CSS Fixes */
.nav-links.active {
  display: flex !important; /* Shopify's default display properties ko override kare */
  z-index: 9999 !important; /* Announcement bars se upar dikhane ke liye */
}

.dropdown.active {
  opacity: 1 !important;
  transform: translateY(0) scaleY(1) !important; /* Shopify transitions ko force kare */
  pointer-events: all !important;
}

/* Chrome tap highlight remove */
.dropdown {
  -webkit-tap-highlight-color: transparent;
}

// --------------------------
// DOM Elements Selection
// --------------------------
const navLinks = document.querySelector(".nav-links");
const dropdowns = document.querySelectorAll(".dropdown");
const hamburger = document.querySelector(".hamburger");
const navbar = document.querySelector(".navbar");

// --------------------------
// Dropdown Functionality
// --------------------------
function handleDropdown(e) {
  e.stopPropagation();

  // Mobile devices ke liye
  if (window.innerWidth < 768) {
    const currentDropdown = e.currentTarget;

    // Toggle current dropdown
    currentDropdown.classList.toggle("active");

    // Close other dropdowns
    dropdowns.forEach((drop) => {
      if (drop !== currentDropdown) {
        drop.classList.remove("active");
      }
    });
  }
}

// Click outside to close dropdowns
document.addEventListener("click", (e) => {
  if (window.innerWidth >= 768) return;

  const isClickInside = e.target.closest(".dropdown");

  if (!isClickInside) {
    dropdowns.forEach((dropdown) => {
      dropdown.classList.remove("active");
    });
  }
});

// --------------------------
// Hamburger Menu Toggle
// --------------------------
hamburger.addEventListener("click", () => {
  // Toggle menu visibility
  hamburger.classList.toggle("active");
  navLinks.classList.toggle("active");

  // Close all dropdowns when closing navbar
  if (!navLinks.classList.contains("active")) {
    dropdowns.forEach((dropdown) => {
      dropdown.classList.remove("active");
    });
  }
});

// --------------------------
// Scroll Behavior
// --------------------------
let lastScrollPosition = window.pageYOffset;

window.addEventListener("scroll", () => {
  if (window.innerWidth >= 768) {
    // Desktop check
    const currentScrollPosition = window.pageYOffset;

    // Hide/show navbar on scroll
    if (currentScrollPosition > lastScrollPosition) {
      navbar.classList.add("hidden");
    } else {
      navbar.classList.remove("hidden");
    }

    lastScrollPosition = currentScrollPosition;
  }
});

// --------------------------
// Initialize Event Listeners
// --------------------------
dropdowns.forEach((dropdown) => {
  dropdown.addEventListener("click", handleDropdown);
});

I want the mobile dropdown to open and close smoothly when clicked

Upvotes: 0

Views: 16

Answers (0)

Related Questions