Increase Spacing Between Mega Menu Items (Dawn 10.0 Theme)

[bet]

Is there a way with code to increase the spacing between my top level Mega Menu items when in Desktop Mode? (Just looking to increase the spacing between the parent menu items, and not the spacing of the children/grandchildren menu items)

I am using Shopify Dawn 10.0 theme. Below is link to the website:

BuyExcelTemplates.com

Thank you.

[Artzen_tech]

Hello @bet 
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
.mega-menu__link.mega-menu__link--level-2.link {
    margin-bottom: 10px;
}
</style>

 like this:

Let me know if need further assistance
Regards,
Artzen Technologies

[topnewyork]

Hi @bet 

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above </body> tag

div .mega-menu__content{
    padding-top: 50px;
}

RESULT:

[bet]

I added an image to clarify where the extra space is needed.

[topnewyork]

@bet 

Follow these Steps:
Go to Online Store Edit Code Find theme.liquid file or base.css
Add the following code in the bottom of the file above </body> tag

.list-menu li{
    padding-left: 5px;
    padding-right: 5px;
}

[Dan-From-Ryviu]

Hi @bet 

Please add this code to bottom of your base.css file in Online store > Themes > Edit code 

.mega-menu__link--level-2:not(:only-child) { margin-bottom: 20px !important }

 

[bet]

Please see the image I added to clarify where the spacing is to be increased.

[Artzen_tech]

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
.header__menu-item.list-menu__item.focus-inset {
    padding: 12px 20px;
}
</style>

[Dan-From-Ryviu]

Please use this coded instead of 

summary.list-menu__item { padding-right: 5rem !important; }

[Artzen_tech]

Hello @bet 
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
.mega-menu__link.mega-menu__link--level-2.link {
    margin-bottom: 15px;
}
</style>

Let me know if need further assistance
Regards,
Artzen Technologies

[oscprofessional · Accepted solution]

Hello @bet 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.header__menu-item {
    padding: 2.2rem !important;
}

[bet]

.header__menu-item {
padding: 2.2rem !important;
}

----------------------------------------------

Your solution above added the extra space between the main parent menu items like I wanted but it also added extra white space above and below the parent menu items and in so doing it pushes down all the info that is below the parent menu.  Any possible code adjustment that would not create this extra white space above and below the parent menu?

[oscprofessional]

Hello @bet 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.header__menu-item span {
    padding: 10px !important;
}

[bet]

I'll stick with your first solution. Thanks for your help.

[Artzen_tech]

Hello @bet 
Its Artzen Technologies! We will be happy to help you today.

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> theme.liquid file.

Add the following code in the bottom of the file above </body> tag

<style>
.header__menu-item.list-menu__item.focus-inset {
    padding: 12px 20px;
}
</style>

Let me know if need further assistance
Regards,
Artzen Technologies