Shopify themes, liquid, logos, and UX
Hi, I am having trouble with the header logo on my site. There two major problems Im running into are that quality and the size of the header. When I try to upload my logo (png file) the quality of the logo is severely decreased and the logo becomes pixelated. Also when I upload my logo my whole webpage is shifted down due to the large margin/border (not sure which one) in the header. Is there a way for me to reduce the border/margin in the header and how do I maintain the quality of my logo
Thank you
Solved! Go to the solution
This is an accepted solution.
thanks for details please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.site-nav {
margin-top: 0 !important;
}
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
yes please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
.logo__image-wrapper {
max-width: 130px!important;
}
Thanks for the reply and suggestion. I tried this and it didn't do what I was looking for. Luckily enough this helped me achieve what I was attempting to do!
Really appreciate the help.
yes please give me screenshort
Hi
Sent pic showing what I was referring to. I was wondering how to reduce the space (marked in blue) between the logo and the menu items
This is an accepted solution.
thanks for details please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.site-nav {
margin-top: 0 !important;
}
Thank you!
That did the trick
its my pleasure to help us
@KetanKumar @KetanKumar @KetanKumar
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
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