Increase space between main menu in heading

Store Design
, ,
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.