Header question - Display logo when on PC / display favicon when on mobile. Possible?

Solved

Header question - Display logo when on PC / display favicon when on mobile. Possible?

Groomify
Excursionist
16 0 0

Well, as mentioned in subject. No more details to add.

Accepted Solution (1)
DaisyVo
Shopify Partner
3781 406 498

This is an accepted solution.

Hi @Groomify 
Please add the code to the red line as shown

https://prnt.sc/4eOu7H4y3_cA

h1.header__heading
 {
justify-self: center !important;
}
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

DaisyVo_0-1738511965165.png

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 11 (11)

DaisyVo
Shopify Partner
3781 406 498

Hi @Groomify 

Thank you for reaching out to the Shopify community. I'd be glad to assist you. Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Groomify
Excursionist
16 0 0

Hey! Yeah absolutely. https://groomify.se/ - Password: 1

DaisyVo
Shopify Partner
3781 406 498

Hi @Groomify 

https://prnt.sc/leERQuNvDGo_
This is the code before editing, file header.liquid

https://prnt.sc/ajSlmMC3-lEv
Please add the code as shown in the picture for me.

<img src="https://groomify.se/cdn/shop/files/Groomify_Favicon_1.png?crop=center&height=32&v=1738505253&width=3..." width="24px" class="ani-custom-logo" />

After adding successfully I will continue editing for you

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Groomify
Excursionist
16 0 0

Yep, it's done

DaisyVo
Shopify Partner
3781 406 498

Hi @Groomify 
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 </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:
{% style %}

img.ani-custom-logo {
 display: none;
}
@media screen and (max-width: 768px){
.header__heading-logo-wrapper:has(img.ani-custom-logo) > img:nth-child(1) {
display: none !important;
}
body img.ani-custom-logo {
 display: block !important;
}
}
{% endstyle %}
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Groomify
Excursionist
16 0 0

It worked, thanks! 😄

 

For the final part, I would like it to be centered on the header, is it possible?

DaisyVo
Shopify Partner
3781 406 498

This is an accepted solution.

Hi @Groomify 
Please add the code to the red line as shown

https://prnt.sc/4eOu7H4y3_cA

h1.header__heading
 {
justify-self: center !important;
}
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

DaisyVo_0-1738511965165.png

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Groomify
Excursionist
16 0 0

Works, ty! Weird tho, it looks like it's not fully centered. It is cropped the correct way so idk why it's more placed to the left...

DaisyVo
Shopify Partner
3781 406 498

Hi @Groomify 

You can look at this image to understand better
it is centered according to the cell it contains
and the gap from the left and right icons makes it feel off
plus there is 1 icon on the left
there are 2 icons on the right
so it still looks off

DaisyVo_0-1738512768946.png

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
Groomify
Excursionist
16 0 0

I see. Is it possible to make it jump 1 step to the right then? Maybe by placing an "invisible icon" on the left side so that it jump one step to the right or no?

Groomify
Excursionist
16 0 0

https://gyazo.com/63c9942017197ea249b69586be0e4805

 

Looks like it's some kind of dead space left to the search icon on the menu bar...