How to resize logo without shifting header icons in Taste theme

Store Design
, , ,
1

I’m trying to resize my logo to be big and centered, and I tried adjusting logo width to achieve the result. It worked, but it also shifted my header icons down too - the search button, cart, button, drawer button.

I want that the icons stay up where they were, while the logo stays big and centered.

Also is there any way to increase those icons’ size?

Thanks!

2

Hey @Safir
Kindly share your Store URL and Password if enabled

3

Hi, this is the store url: https://phoenixroastery.shop/

4

Hey @Safir

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

Moeed_0-1691496420534.png
Moeed_0-1691496420534.png1900×928 263 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

Hey Moeed,

I think this code only limited how big I can make the logo and the shift of the icons.

Now, at 300px width of logo, the logo is smaller and the shift of icons downward is less.

It doesn’t help since I want the logo to be at the same position and size as the original 300px width size and positioning, while keeping the icons at the top.

If you go to my store right now, you will see the logo as it should be (in terms of size and positioning) but the icons are way to low, and I want them to be aligned to the top of the header instead of with the logo.

Let me know if I should provide more clarity.

Thanks!

6

Hey @Safir

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

Moeed_0-1691555960733.png
Moeed_0-1691555960733.png1903×933 270 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
7

Thanks! it worked.

Can I do the same for mobile view as well? because currently the mobile logo is at a standard small size.

8

Hey @Safir
Keep the previous code and add this new code above in them

@media screen and (max-width: 767px) {
.header__icon {
    margin-top: -70px;
}
.header__search {
    margin-top: -40px;
}
}

Moeed_0-1691565860011.png
Moeed_0-1691565860011.png374×504 176 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
9

yes I think it worked.

What value can I edit to resize the logo for mobile view?

Thanks again!

10

Hey @Safir

To change the logo on the mobile view only, add the following code above in theme.liquid file.

@media screen and (max-width: 767px) {
.header__heading-logo {
    max-width: 70% !important;
}
}

I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like
11

Thank you so much, Moeed

12

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.