Focal Theme - Remove Fade Animations From Menus

[hdkingy]

Hello, hoping someone can help us to remove the fade animations from menus in our theme.

For example, if you click a product variant dropdown it will slowly fade in and out, same with the header menus at the top of the page. 

Here is the site for reference: https://pondstream.com/products/clearlake%E2%84%A2-muck-eliminator

Thank you!

[BSSCommerce-HDL · Accepted solution]

Hi @hdkingy, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
  .nav-dropdown {
   transition: none !important;
  }
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @hdkingy, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
  .nav-dropdown {
   transition: none !important;
  }
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[hdkingy]

Worked great! How can I achieve the same thing for the product variant dropdown menus?

[BSSCommerce-HDL]

Hi @hdkingy, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
  .combo-box {
     transition: none !important;
   }
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[hdkingy]

Awesome, worked great!

[BSSCommerce-HDL]

@hdkingy, Have a good day 😍

[hdkingy]

Could you take a look at one more thing for me actually if you still have the time?

When selecting the first variant dropdown menu it will highlight the current selected option by default. Is there anyway to remove that?

Thank you, really appreciate all your assistance.

[BSSCommerce-HDL]

Hi @hdkingy, This operation is done according to the theme if you select another variant option then it will automatically highlight as an option

[hdkingy]

I see, no problem.

I did notice that while no transition for the combo box is good on desktop, it looks a bit funky on mobile.

Is there something I can add to the code to keep the transition active for mobile only?

[BSSCommerce-HDL · Accepted solution]

Hi @hdkingy,  

Please remove the 2 old codes I gave you before and here is the new code for this:

<style>
@media only screen and (min-width: 768px) {
  .combo-box, .nav-dropdown {
    transition: none !important;
  }
}
</style>

Hope this can help you 😍

[hdkingy]

Beautiful! Really appreciate all your help

[BSSCommerce-HDL]

@hdkingy If there are any problems, please tell me, I will help you if I can. Have a good day 😍