Shopify themes, liquid, logos, and UX
Hi,
I want to reduce the white space between my logo and the menu, at the the header section.
Any idea how to do it?
Solved! Go to the solution
This is an accepted solution.
Hi @tigas31 ,
This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the TOP of the file:
@media screen and (min-width: 990px) {
.header__heading-logo {
max-height: 100px !important;
object-fit: cover !important;
width: 100% !important;
width: 300px !important;
max-width: 100% !important;
}
}
I hope it would help you
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
This is an accepted solution.
Hi @tigas31 ,
I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the bottom of the file:
@media screen and (min-width: 750px) {
.footer {
padding-top: 10px !important;
}
.footer__content-top {
padding-bottom: 20px;
}
.footer__content-bottom {
padding-top: 0;
}
.product--large:not(.product--no-media) .product__media-wrapper {
max-width: 55%;
}
.product-media-container.constrain-height.media-fit-contain {
width: 100%;
}
.product--large:not(.product--no-media) .product__info-wrapper {
max-width: 45%;
}
.product__title h1 {
font-size: 3.5rem;
}
}
I hope it would help you
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
This is an accepted solution.
Hi @tigas31 ,
You can try below code in section-footer.css file:
@media screen and (min-width: 750px) {
.footer {
margin-top: 60px !important;
}
.footer__copyright {
margin-top: 10px !important;
}
}
I hope it would help you
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Hi @tigas31
This is Mike from Omega
You can try this solution:
1. Open Theme -> Edit code
2. Open Assets/base.css and paste this code to the bottom of file:
@media screen and (min-width: 990px){
.header:not(.header--middle-left) .header__inline-menu {
margin-top: -10px;
}
}
You can change the number of pixel to suitable to your store, a negative number is acceptable.
Hope my answer will help you.
Mike from Omega
Hi @Mike-Consentik ,
I pasted the code but nothing happened. Please notice that I've added my logo and then adjusted the desktop logo width to make the logo bigger, but I'm afraid this might be the reason behind my problem:
I've also noticed that this area around the logo is clickable, which means that it's not empty, it's part of the logo and redirects me to the homepage if I click in it, but I've uploaded a logo without background, so I don't understand why this is happening.
This is an accepted solution.
Hi @tigas31 ,
This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the TOP of the file:
@media screen and (min-width: 990px) {
.header__heading-logo {
max-height: 100px !important;
object-fit: cover !important;
width: 100% !important;
width: 300px !important;
max-width: 100% !important;
}
}
I hope it would help you
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Hi @tigas31 ,
You can share your store URL and if your store is password protected then please provide password too. Can I test it for you?
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
@PageFly-Richard it worked!! The page was still reloading. Thank you!
By the way, can I do the same with the footer? Currently it occupies half of my screen, so I also want to reduce it
This is an accepted solution.
Hi @tigas31 ,
I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-footer.css->paste below code at the bottom of the file:
@media screen and (min-width: 750px) {
.footer {
padding-top: 10px !important;
}
.footer__content-top {
padding-bottom: 20px;
}
.footer__content-bottom {
padding-top: 0;
}
.product--large:not(.product--no-media) .product__media-wrapper {
max-width: 55%;
}
.product-media-container.constrain-height.media-fit-contain {
width: 100%;
}
.product--large:not(.product--no-media) .product__info-wrapper {
max-width: 45%;
}
.product__title h1 {
font-size: 3.5rem;
}
}
I hope it would help you
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
@PageFly-Richard Thanks!!
But still regarding the footer, it's not completely solved. What makes it looks so big it's that bar at the bottom "2023, neevra". Any way of reducing the size of this bar?
This is an accepted solution.
Hi @tigas31 ,
You can try below code in section-footer.css file:
@media screen and (min-width: 750px) {
.footer {
margin-top: 60px !important;
}
.footer__copyright {
margin-top: 10px !important;
}
}
I hope it would help you
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025