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
3477 462 524

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Reply 1 (1)

BSS-Commerce
Shopify Expert
3477 462 524

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency