Shopify themes, liquid, logos, and UX
Hi Community,
i want to change the size of the logo in the header when i scroll down and it changes to overlay.
So when you open the homepage the logo size is 370px and that’s good as it is. But when you scroll down it is too big. So i would like it to change to 100px as soon as it is not transparent anymore.
My theme is flow
my url is https://www.betanics.de
and password is Modesto
I have basic knowledge in coding.
Thanks in advance 🙂
Kathie
Solved! Go to the solution
This is an accepted solution.
@Katharina_be,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
<style>
.sticked .site-header__logo-image img{
max-height: unset !important;
max-width: 200px !important;
width: 100% !important;
transition: all .32s !important;
}
@media (max-width: 749px){
.sticked .site-header__logo-image img{
max-width: 100px !important;
}
}
</style>
You can change the logo's width as per your wish:
200px = width on desktop
100px = width on mobile
Please let me know whether it works.
Kind regards,
Diego
This is an accepted solution.
@Katharina_be,
1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:
<style>
.sticked .site-header__logo-image img{
max-height: unset !important;
max-width: 200px !important;
width: 100% !important;
transition: all .32s !important;
}
@media (max-width: 749px){
.sticked .site-header__logo-image img{
max-width: 100px !important;
}
}
</style>
You can change the logo's width as per your wish:
200px = width on desktop
100px = width on mobile
Please let me know whether it works.
Kind regards,
Diego
Hi @diego_ezfy
is it also possible to make the whole header smaller? Now only the logo gets small but the header stays the same size.
I want the header to be smaller so customers can see more at the website at the same time.
Best
Kathie
To make it plain: the menu should move up
@diego_ezfy @diego_ezfy @diego_ezfy
Hello Ketan🙂
Please could you help me to make the logo appear on my page as it is in the image that I send you?
The problem is that if I increase the size of the logo, the size of the header also increases. Because the header keeps the logo inside, but we want them to be independent. In order to increase the size of the logo so that it protrudes a bit from the header.
What is the code and where do we have to modify to make the size of the logo and header independent?
Our page is: https://kongpods.com/
Thank you
Hello Diego,
Is it possible to have something like this online store's header and logo reaction when scrolling down, but in dawn theme?
Thanks in advance.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024