Shopify themes, liquid, logos, and UX
Hello!
Basically I want to make my header thinner (individually for mobile and desktop versions)
For some reason the upper part of the header is bigger than the lower part, which makes it look asymmetric.
I attach a photo for reference:
As it can be seen, the upper part is bigger than the lower part inside the header, which makes the icons and logo being closer to the bottom of the header, when it should be exactly in the center (vertically).
Is there any code to adjust the height of the header and make it look symmetrical and centered? (both on mobile and desktop versions, with different codes for each)
My website is https://n6ia1fdm0ovh4srq-60150284501.shopifypreview.com and my theme is Stiletto
Solved! Go to the solution
This is an accepted solution.
Hi @martujv,
follow these steps
Step 1. Go to Admin -> Online store -> Theme > Edit code
Step 2. Find the file base.css
Step 3: At the end of the file, add this code:
@media (min-width: 960px){
.header{
padding-top:0!important;
}
}
Your header will look like this
If it helps you, please like and mark it as the solution.
Best Regards
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
This is an accepted solution.
Hi @martujv,
Here are the steps you can follow:
1, Navigate to Online Store > Themes > Edit Code.
2, Locate and open the base.css (or theme.css, custom.css) file.
3, Paste the code snippet provided below at the bottom of the file, then save your changes.
header.header {
padding: 0 !important;
}
Here is the result
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
This is an accepted solution.
Hi @martujv,
follow these steps
Step 1. Go to Admin -> Online store -> Theme > Edit code
Step 2. Find the file base.css
Step 3: At the end of the file, add this code:
@media (min-width: 960px){
.header{
padding-top:0!important;
}
}
Your header will look like this
If it helps you, please like and mark it as the solution.
Best Regards
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
It's almost good but this way there is a small gap between the header and the top of the page, is there any way to fix that and adjust the header to the top?
This is an accepted solution.
Hi @martujv,
Here are the steps you can follow:
1, Navigate to Online Store > Themes > Edit Code.
2, Locate and open the base.css (or theme.css, custom.css) file.
3, Paste the code snippet provided below at the bottom of the file, then save your changes.
header.header {
padding: 0 !important;
}
Here is the result
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
It's almost good but this way there is a small gap between the header and the top of the page, is there any way to fix that and adjust the header to the top?
Here is the code to make the small gap disappear
.shopify-section-group-header-group.header__outer-wrapper {
top: 0 !important;
}
Here is the result
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
It worked, thank you!
You're welcome! 😊
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024