Editing Horizon Mega Menu padding between menu elements

Store Design
1

Helle everyone,

is there a way to edit the padding between the different elements in the Shopify Horizon Theme. From my point of knowledge it uses mega menu and none of the classic edits in the base.css works.

2

Hi @BraveLegolas

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

3

Password: rtialt

URL: https://micky-oye.myshopify.com

4

Sample
Sample1850Ă—474 92.2 KB

5

You need to adjust the following:

.menu-list {
–menu-horizontal-gap: YOUR NEW DISTANCE;
–menu-vertical-gap: var(–gap-xl);
display: flex;

}

Found in _header-menu.liquid, line 250. Theme Horizon 3.4.0

:slight_smile:

6

I’d suggest to try this code in Header section “Custom CSS” setting:

nav {
  --gap-xl: 10px;
}

You can change 10px to whatever you feel is a better option. However, this CSS variable controls other aspects of the mega-menu too.

7

Thank you so much that solution worked