Make header menu gaps bigger - desktop

Store Design
, ,
1

Hello, i would like to make my header menu gaps bigger on desktop, as they are currently too close to each other:

Screenshot 2025-09-11 at 16.53.35
Screenshot 2025-09-11 at 16.53.35729×131 103 KB

my store is https://geg0hdxyqggohnfo-90984481091.shopifypreview.com/ , theme is horizon

2

Your preview link has expired so I cannot check but you can try to add this code to Custom CSS of theme in Sales channels > Online Store > Themes > Customize > Theme settings

@media (min-width: 990px) {
  .menu-list__list-item:where(:not([slot=overflow]))>.menu-list__link {     padding-inline: 16px !important; }
}

Best regards,

Dan from Ryviu: Reviews & QA

3

Hello @ads18922,

I can help you with that. The easiest way to increase the spacing between your header menu items on Shopify is by adding a small bit of custom CSS code. This code will only apply to the desktop view, so it won’t affect the mobile layout.

Based on the screenshot and the name of your theme, “Horizon,” here’s how you can do it:

Step-by-Step Instructions

  1. Access Your Theme Code:

    • From your Shopify admin, go to Online Store > Themes.

    • Find your “Horizon” theme and click on Actions > Edit code.

  2. Find the CSS File:

    • In the theme code editor, look for the Assets folder on the left-hand side.

    • Inside the Assets folder, find a CSS file. It’s usually named something like base.css, theme.css, or style.css. The most common name for modern themes is base.css.

  3. Add the Custom CSS:

    • Scroll to the very bottom of that CSS file.

    • Copy and paste the following code at the bottom of the file on a new line.

    CSS

    /* Adjust header menu spacing on desktop */
@media (min-width: 750px) {
  .header__inline-menu .list-menu--inline {
    gap: 40px;
  }
}

  4. Save and Check:

    • Click Save in the top right corner.

    • Go to your website and refresh the page. You should now see more space between your header menu items.

How to Customize the Code

The 40px value in the code is what controls the amount of spacing.

  • To increase the spacing, change 40px to a larger number (e.g., 50px, 60px).

  • To decrease the spacing, change 40px to a smaller number (e.g., 25px, 15px).

The @media (min-width: 750px) part of the code ensures that this style change only applies to screens that are 750 pixels wide or larger, which is typically the size of a tablet or desktop. This prevents it from affecting your mobile menu.

If for some reason this code doesn’t work for you, your theme might use a different class name for the menu. If that’s the case, let me know and give me the site link (your preview link is expired), and I can help you find the correct one by inspecting your live site.

Regards,
EmbedAny Support

4

@ads18922 preview link has been expired, can you please share updated preview link?