Modifying Mega Menu Design to Rounded Layout

[Jonas1]

Hi, I need help updating my mega menu design to achieve a rounded style, as shown in the image I’ve attached. I want to modify the sharp corners at the top of the menu so that they are rounded, creating a smoother, more modern appearance.

Here are the specific changes I need:

• The top corners of the mega menu should be rounded, as indicated by the red lines in the attached image.
• The layout must remain responsive and retain its current functionality.
• I’m using the dawn theme, so advice on how to implement this would be appreciated.
• The website is www.hestbechluxuries.com

Does anyone have suggestions for CSS adjustments or plugins that can help with this modification?

Thanks in advance!

[namphan]

Hi @Jonas1 ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.mega-menu__content {
border-radius: 75px !important;
}

[Jonas1]

It did something. But not like i really want it.

I want it to be rounded, as indicated by the red lines in the first attached image.

tried to make a photo of how I want it to be.

This is how it looks after I tried to paste the code

[Made4uo-Ribe]

Hi @Jonas1

Can you remove this code on base.css file.

And also, the border radius you add on the theme.liquid.

Paste this one on the theme.liquid.

And Save.

Result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[Jonas1]

I’m almost there, there’s some I dont know how to fix. Theres no gab from header to the announcement-bar and in the mega menu doesn’t “attach” to the header at the top

[Jonas1]

got it to work now.
but I need the small space at the top.

How do I do that?

[Made4uo-Ribe]

Add margin on the top. You already did it but only the side.

Or like this.

You dont need to add !important everytime.

#shopify-section-sections--19457311179016__header sticky-header {
    margin: 1.25rem 1.25rem 0 1.25rem;
}

Add where you add the code. !important use when you overide the code.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[Jonas1]

Thank you so much. It works now

[Made4uo-Ribe]

Hi @Jonas1

Regarding to your pm, I cant send the code there.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

product-form.product-form button#gowishBlueButton {
    display: none !important;
}

• And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!