Increase Spacing Between Menu Items On The Studio Theme?

[designworks_]

Hello, I need help with this. I want to increase the space between the 3 header menu items (they are in one row with me logo, which is centered) I have tried other solutions but they did not work.

 Thank you!!

[diego_ezfy · Accepted solution]

@designworks_@designworks_, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (min-width: 750px){
.list-menu--inline > * + *{
    margin-left: 20px;
}
}

You can change the 20px value to any value you wish.

If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

[PageFly-Amelia]

Hello @designworks_ 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

Can you provide me with your URL link so I can check it for you?

[designworks_]

Hello @PageFly-Amelia  thanks for reaching out!

URL: CLEO CURATES | Playful design for cheerful homes – Cleo Curates (cleo-curates.com)

pword: tahshe

[PageFly-Amelia · Accepted solution]

Hello @designworks_ 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

/* You can change the value of 20px to the value you want */
.list-menu--inline {
   gap: 20px;
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[Made4uo-Ribe]

Hi @designworks_ 

Im not sure how much space you like. You can choose where ever you like. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.list-menu--inline {
    display: flex;
    justify-content: space-evenly;
}

And Save. 

Or just simply add some gap between theme. 

.list-menu--inline {
    gap: 15px;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[diego_ezfy · Accepted solution]

@designworks_@designworks_, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (min-width: 750px){
.list-menu--inline > * + *{
    margin-left: 20px;
}
}

You can change the 20px value to any value you wish.

If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego