CODEWITHSUNDEEP
shopifyliquidshopify-appshopify-template
CCodes
CCodes

Reputation: 43

Why is this nav menu flickering?

I have been trying to debug this for so long so I thought I could bounce some ideas / get some direction as to why this is happening...

once the page loads and you hover over the dropdowns, there is a flicker where the dropdown initiates. any clues as to why? thanks in advance!!!

Upvotes: 0

Views: 412

Answers (1)

PHP kid
PHP kid

Reputation: 55

I recently faced the same issue. I couldn't find a solution online, but through trial and error, I figured it out. Sharing the solution here in case it helps anyone else.

Step 1:

Open the custom.css. Add the following CSS code at the end of the file:

@media only screen and (min-width: 1200px) {
  /* Hide the menu by default */
  .menu {
    display: none; /* Prevent flashing */
    visibility: hidden; /* Optional for added stability */
  }

  /* Show the menu when the page has loaded */
  .menu-loaded .menu {
    display: block;
    visibility: visible;
  }
}

Note:

Change the .menu to your menu's class name. I have used @media  because the flicker was only happing in my desktop version, you can remove it if needed.

Step 2:

In your Shopify theme, open the theme.liquid file. Add the following script just before the closing tag:

<script>
  document.addEventListener('DOMContentLoaded', function () {
     document.body.classList.add('menu-loaded');
  });
</script>

And you're done...

Upvotes: 0

Related Questions