Header with logo and shopping card shifted to the left!

Store Design
, , , , , , ,
1

Hello everyone!

I need some help with my header. So basically I was editing the code a bit and after that, I have noticed that on the mobile my header with the logo and shopping cart had shifted to the left, could somebody please help me to fix it?

I have attached a picture for a demonstration.

header.png
header.png1920Ă—1080 225 KB

Here is a link to my website: https://0b798d-3.myshopify.com/

Thank you very much in advance!

1 Like
2

Hi @Farid117 ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

I realize this situation isn’t exactly what you’d hope for, but I’ve got a potential solution that I’d like to share with you:

  1. Go to Online Store → Theme → Edit code.
  2. Open your assets/base.css theme file.
  3. Add the code at the end of the file:
.header__icons {
    padding-right: unset;
}

Best regards,

Anthony

1 Like
3

Hello Anthony,

Thank you very much for your reply!

I have tried the given solution and it had shifted the logo a bit back to its original position, however, it is still visible that it is not centered properly.

Is there anything else I could implement to address with issue?

Thank you in advance!

Sincerely,
Farid Mirzayev

1 Like
4

Yes, I would like to give another solution as follows to keep the original position that you adjusted for the logo, you can remove my previous code and add this code below:

.header__icons {
    left: .8rem;
    position: relative
}
1 Like
5

Thank you for your additional advice!

I have removed the previous code and tried this one, but it seems like the logo just went to the previous(shifted) position again.

I would really appreciate if you could advise any other potential solutions, if not it is fully understandable!

In any case, thank you very much for your time!

Sincerely,
Farid Mirzayev

6

Hi @Farid117 ,

I tried another way and it looks like this, see if it works for your store. If you feel it’s a good fit let me know and I’ll come up with a solution for you.

Beae_Anthony_0-1692906784921.png
Beae_Anthony_0-1692906784921.png394Ă—513 31.8 KB

Best regards,

Anthony

1 Like
7

Yes Anthony,

That actually looks perfect! Would you mind sharing the solution with me?

Thank you for your assistance!

8

Hi @Farid117

Im not sure if it work. Lets try then.

  • 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:
.header {
    padding: 0px 2rem !important; 
}
  • If its not working try to put in the theme.liquid paste it before the tag.
  • And Save.

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

1 Like
9

Yes, First, remove the code I provided above,
Next, you can use the code below:

.header__icons {
    padding-right: unset;
}

.header {
    grid-template-columns: 1fr 1.5fr 1fr;
}
1 Like
10

Hello Ribe,

Thank you for replying!

I have tried the offered solution, it seems like the logo slightly shifts to the right, however it is still visible that the logo is not placed properly, which might look unattractive to the customers.

I would appreciate any alternative solutions if possible,

Thank you very much for all your help!

Sincerely,
Farid Mirzayev

11

Thank you very much for sharing!

This has worked perfectly, I really appreciate your Help!!!

1 Like
12

I am very happy to have helped you. If you have any further problems, don’t hesitate. Have a good day :blush: