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
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024