How can I center header buttons in Ride theme?

[jaimejaime]

Hi everyone!

I’m trying to center the buttons from the header, but I’m not able. (Photo below)

I’m using Ride theme on version 15.2.0.

If somebody can help me I would appreciate it a lot.

Thanks in advance

[Moeed]

Hey @jaimejaime

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[jaimejaime]

Hi Moeed,

URL: nuevatienda.cartembooks.com

Password: Admin

Thanks a lot!

[Dan-From-Ryviu]

Hi @jaimejaime

Do you mean to make it like this?

[jaimejaime]

Yes!!!

How can I apply it?

[topnewyork]

Hi @jaimejaime

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

Result:

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

[PageFly-Richard]

Hi @jaimejaime

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[DaisyVo]

Hi @jaimejaime

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
header.header {
    grid-template-columns: auto !important;
}
nav.header__inline-menu {
    justify-self: center !important;
}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[jaimejaime]

Thanks a lot!

Everyone have a nice day!

[oscprofessional]

Hello @jaimejaime ,

Go to Online Store > Themes > Actions > Edit Code > base.css

Add below code at the bottom of base.css file.

@media screen and (min-width: 990px) {
 header.header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
 }
 .header--middle-left .header__inline-menu {
    text-align: center;
 }
}