Re: Dim the visible background behind the mega menu when its open

daVidB0079 · ‎02-15-2024

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.

ThePrimeWeb · ‎02-15-2024

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 · ‎02-15-2024

https://6a2fdd-2.myshopify.com/

ThePrimeWeb · ‎02-15-2024

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.

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 · ‎02-15-2024

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 · ‎02-15-2024

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 · ‎02-15-2024

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

Re: Dim the visible background behind the mega menu when its open

Dim the visible background behind the mega menu when its open

☕Buy me a coffee☕

☕Buy me a coffee☕

Community Blog Articles