Increase space between main menu in heading

Store Design
, ,

Topic summary

A Turbo theme user seeks to increase spacing in their header menu below the logo. Multiple developers provided CSS solutions with varying approaches:

Main Solutions Offered:

  • Add CSS targeting .main-nav with properties like padding, row-gap, and flexbox adjustments
  • Modify .header__logo line-height property (changing from default to line-height: 3)
  • Insert custom CSS in theme.liquid before the </head> tag or in styles.css

Implementation Locations:

  • Most suggest editing styles.css in the Assets folder
  • Alternative: Adding inline styles in theme.liquid
  • One solution references line 4422 in styles.css

Current Status:
The issue remains unresolved. The original poster tried at least one solution but reported it didn’t work, and noted they don’t have a BASE.css file under assets as one responder suggested. They also questioned whether having “turbo menus” versus regular main menus affects the solution.

Screenshots were shared showing the desired outcome, but the specific CSS implementation that works for this Turbo theme configuration hasn’t been confirmed.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

How do I add more space in my heading menu, below my logo? I am using a Turbo theme.

My website is www.blushandboldco.com

Screenshot 2024-09-01 225002.png
Screenshot 2024-09-01 225002.png1646Ă—261 25.8 KB

1 Like
2

Hi @Tperez4988 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Hello @Tperez4988 , Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. Open “styles.css”.
  6. Add the following code at the file.

search .main-nav in the styles.css file.

.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  row-gap: 15px; /* add this new CSS to add gap/space */
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

4

Hello @Tperez4988

Go to online store ----> themes ----> actions ----> edit code ---->assets ----> styles.css —> line number 4422
search this code

.header__logo {
line-height: 1;
}

and replace with this code

.header__logo {
line-height: 3;
}

result

2.png
2.png904Ă—179 15.8 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Hello @Tperez4988 , Please follow these steps to add this CSS code:

  1. Access your Shopify Admin.
  2. Go to Online Store > Themes.
  3. Locate the theme you are currently using and select Actions > Edit code.
  4. In a CSS file: Go to Assets, find your CSS file (styles.css), and add your styles. OR
  5. In theme.liquid: Go to Layout, open theme.liquid, and add your CSS inside a tag in the section.
.main-nav__wrapper .nav {
    margin-top: 15px;
}

Here is the screenshot of the same.

Screenshot_66.png
Screenshot_66.png1362Ă—616 352 KB

Feel free to reach out if you have any additional questions. If this solution is helpful, please consider liking and accepting it.
S.P

6

I did that. But it looks like it did not work. Does it matter that some are turbo menus and a regular main menu?

7

Hi @Tperez4988 ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

topnewyork_0-1725257889815.png
topnewyork_0-1725257889815.png821Ă—245 45.8 KB

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

Thanks!

8

Hi. Thanks for your help, but I do not have that BASE.css under asset.