Shopify themes, liquid, logos, and UX
Hi there,
I've added the below code to make the header transparent but now the content of all pages apart from homepage is starting too high. See image below.
How can I modify this code so the pages start below the menu?
password: meifay
Thanks so much!
/* transparent header */
sticky-header.header-wrapper.color-background-1.gradient {
position: absolute;
left: 0;
width: 100%;
background: transparent;
}
Solved! Go to the solution
This is an accepted solution.
Hi @INFRA
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
{% unless template contains 'index' %}
<style>
#MainContent {
padding-top: 12vw;
}
</style>
{% endunless %}
This will add spacing for you unless the homepage
Hope this can help you solve the issue
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.
@INFRA - add this css to the very end of your base.css file and check, also please note thaat this css will change home page as well, but it do not have any separate id or class to have different css
@media screen and (min-width:750px){
main#MainContent {margin-top: 100px;}
}
This is an accepted solution.
Hi @INFRA
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
{% unless template contains 'index' %}
<style>
#MainContent {
padding-top: 12vw;
}
</style>
{% endunless %}
This will add spacing for you unless the homepage
Hope this can help you solve the issue
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 Richard, thanks for the solution, I've just noticed it only works on desktop though. Can we get it to work on mobile too?
Hi @INFRA
Go to your Online store > Themes > Edit code > open theme.liquid, add this code before </head> tag to add space for other page then homepage/
{% if template == 'index' %}
{% else %}
#MainContent { margin-top: 135px !important; }
{% endif %}
- Helpful? Like and Accept solution! Or Support me: Buy Coffee
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hello @INFRA 👋
Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom
#MainContent {
padding-top: 120px;
}
The result
Hope that helps!
this removes the transparent header on the homepage though, can we exclude the homepage from this?
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