Solved

Customize Mega Menu - slide in effect. Dawn theme

monomgroup
Explorer
99 0 35

Hi!

 

Is there a way of letting the mega menu smoothly slide in to the screen when clicking on the primary level title? 

Screenshot 2023-06-10 at 17.44.36.png

 

Website url: www.mism.store

 

Best,

Team-mism

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3441 459 512

This is an accepted solution.

Hi @monomgroup 

You can follow these steps:

Step 1: At Shopify Admin, Go to Online Store -> Themes -> Edit code.

BSSCommerce_2-1686644205942.png

Step 2: Find and open file base.css (or theme.css)

 

BSSCommerce_3-1686644302514.png

Step 3: Add this following code at the end of base.css:

 

div#MegaMenu-Content-1 {
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

div#MegaMenu-Content-2 {
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

div#MegaMenu-Content-3 {
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;

If it worked, please mark as a solution. Good luck!

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Reply 1 (1)

BSS-Commerce
Shopify Expert
3441 459 512

This is an accepted solution.

Hi @monomgroup 

You can follow these steps:

Step 1: At Shopify Admin, Go to Online Store -> Themes -> Edit code.

BSSCommerce_2-1686644205942.png

Step 2: Find and open file base.css (or theme.css)

 

BSSCommerce_3-1686644302514.png

Step 3: Add this following code at the end of base.css:

 

div#MegaMenu-Content-1 {
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

div#MegaMenu-Content-2 {
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

div#MegaMenu-Content-3 {
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;

If it worked, please mark as a solution. Good luck!

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development