Re: Remove white padding between menu and submenu

Solved

Remove white padding between menu and submenu

Karla8
Explorer
57 0 13

Hello,

 

Thank you so much for your help on my previous issue. 

 

After trying the different solutions, I found this was the one that was the closest to what I would like to achieve. As you can see I get some white between the menu and submenu. Also, I would like to color in the menu to be the size of the page.

 

The code I currently have is the following :

 

nav.header__inline-menu {
background: #f9f6f3;
}

.mega-menu__content .mega-menu__list {
background: #f9f6f3;
padding: 3rem 0;
}

 

Screenshot 2024-09-12 152014.png

 

Thanks a lot for your help ! Much appreciated !

 

Karla

Accepted Solutions (2)
topnewyork
Astronaut
1109 147 184

This is an accepted solution.

Hi @Karla8 ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

 

<style>
.mega-menu__content {
    padding-top: 0 !important;
}
</style>

 

topnewyork_0-1726149167806.png

 

Also, if would like to color in the menu to be the size of the page.

nav.header__inline-menu {
    background: #f9f6f3;
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
}

 

topnewyork_2-1726149381134.png


If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

View solution in original post

Made4uo-Ribe
Shopify Partner
9839 2339 2930

This is an accepted solution.

Hi @Karla8 

I already take out that padding in your previous post. If it not working add !important like the below

Add this on your base.css. Thanks!

 

.mega-menu__content {
    padding: 0 !important;
}

 

 And Save. 

Result:

Made4uoRibe_0-1726149055726.png

You should tell me. Im willing to give you solution. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 3 (3)

Karla8
Explorer
57 0 13

forgot to mention : www.hintofhappiness.com

 password : seiyud

topnewyork
Astronaut
1109 147 184

This is an accepted solution.

Hi @Karla8 ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

 

 

<style>
.mega-menu__content {
    padding-top: 0 !important;
}
</style>

 

topnewyork_0-1726149167806.png

 

Also, if would like to color in the menu to be the size of the page.

nav.header__inline-menu {
    background: #f9f6f3;
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
}

 

topnewyork_2-1726149381134.png


If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

Made4uo-Ribe
Shopify Partner
9839 2339 2930

This is an accepted solution.

Hi @Karla8 

I already take out that padding in your previous post. If it not working add !important like the below

Add this on your base.css. Thanks!

 

.mega-menu__content {
    padding: 0 !important;
}

 

 And Save. 

Result:

Made4uoRibe_0-1726149055726.png

You should tell me. Im willing to give you solution. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.