Change Speed at which the Mobile Menu Drawer Opens and Closes (Dawn 10.0 Theme)

[bet]

 

I would like to make the mobile menu drawer slide open/close more slowly.

What are the css / html adjustments needed for this feature to be adjusted on my Shopify Dawn 10.0 theme at my website:

BuyExcelTemplates.com

Thank you.

[bet · Accepted solution]

After doing some digging into the theme code, I found these lines of code in the base.css file which seem to give you different speed options for menu drawer opening/closing:

--duration-short: 100ms;
--duration-default: 200ms;
--duration-long: 500ms;
--duration-extra-long: 600ms;
--duration-extended: 3s;

Then, in the component-menu-drawer.css file, I edited this line of code:

Original Code:
transition: transform var(--duration-default) ease, visibility var(--duration-default) ease;

New Code:
transition: transform var(--duration-extra-long) ease, visibility var(--duration-extra-long) ease;