Dim the visible background behind the mega menu when its open

daVidB0079
New Member
5 0 0

Hello! 

 

I was wondering if there is any way for me to dim the visible background around the menu when its opened? something similar to what this one is doing: https://www.ducati.com/ww/en/home 

 

Also, based on the one above, is there any way for me to make the shape of the menu similiar to that one? The one i have at the moment is full width. 

 

I m using Dawn theme currently.

Replies 6 (6)

ThePrimeWeb
Shopify Partner
2118 606 470

Hey @daVidB0079,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
daVidB0079
New Member
5 0 0
ThePrimeWeb
Shopify Partner
2118 606 470

Hey @daVidB0079,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
body:has(.meteor-menu) #MainContent {
    width:100%;
    height: 100%;
    filter: brightness(0.5)
}

sticky-header.header-wrapper {
    position: fixed;
    width: -webkit-fill-available;
    margin: 20px 50px;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1708004908106.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
daVidB0079
New Member
5 0 0

Awesome, is there a way to have rounded corners, and shadow as the original menu? Is there a way for me to have the logo in the middle and have the text in the left and right of the logo as the original? and now how can I make sure that the menu is always alligned and connected to the drop down of the mega menu? As it is right now its a bit off axis. 

 

daVidB0079
New Member
5 0 0

Is there a way of having the white background of the menu, the width per se, wrap around the text? and be centered? to not have that much white space on the left and right?

daVidB0079
New Member
5 0 0

Is there a way of making the menu not change shape regarding the resolution on which the page is viewed on? cause right not the white space on the right and on the left is shrinking or enlarging depending on the res