Why does my website menu flash and move from one page to another?

Store Design
1

Hello,

I have a little issue with my header, when I load and switch from one page to another, the menu is flashing and slightly moving from top to bottom.

See in action here: https://www.awesomescreenshot.com/video/4558212?key=23ace59c86a785193628406ef4b1e84e

It should not move and the header should stay 100% static like this website that is using Debut theme: https://nebulaelux.com/

I worked with the @GemPages_Agents and here what they told me:

“Currently, the issue is only with the Poppins font. To make them have an overview of the issue, you just please record video of what you noticed as the issue and show them to double check everything related again on their end. It’s to avoid anything can be missed!”

Can you help?

Best,

2

It’s been 3 years since you asked this question. I’m not sure if you resolved it, but 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:

And you’re done…