Shopify themes, liquid, logos, and UX
Hey Team,
My header on my home page on mobile has vanished haha. It's visible on scrolling however not present at all otherwise.
Please help!
Solved! Go to the solution
This is an accepted solution.
Hi @Nato0201
Do you know why it's cut off the top part of the image? -> Have a margin-top: -105px here.
You can use code below:
sticky-header.header-navigation-wrapper {
top: 0;
}
sticky-header-mobile.header-mobile{
top: 0;
}
.scrolled-past-header .header-navigation{
background-color:transparent!important;
}
.scrolled-past-header sticky-header-mobile.header-mobile {
background-color: transparent!important;
}
@media (max-width: 767px) {
body #shopify-section-template--22144887259424__16321237356a896dad{
margin-top: 0!important;
}
}
Hi @Nato0201 ,
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Assets/base.css
3. Add code below to end of file
sticky-header.header-navigation-wrapper {
top: 0;
}
Hi there, this hasnt worked unfortunately.
I've attached a screen shot of the current code in base.css
I have been altering the home and product page headers to allow it to be transparent but also be able to fit an image behind the transparent header.
Hi @Nato0201 ,
May I suggest code below:
sticky-header.header-navigation-wrapper {
top: 0;
}
sticky-header-mobile.header-mobile{
top: 0;
}
.scrolled-past-header .header-navigation{
background-color:#000!important;
}
.scrolled-past-header sticky-header-mobile.header-mobile {
background: var(--bg-color)!important;
}
After scrolled
Thanks for that code! Do you know why it's cut off the top part of the image? (dimensions are: Width x Height (638 x 870)px)
Also, is it possible to make the header transparent on the scroll and not black?
Thank you so much for all your help!
For mobile this is
This is an accepted solution.
Hi @Nato0201
Do you know why it's cut off the top part of the image? -> Have a margin-top: -105px here.
You can use code below:
sticky-header.header-navigation-wrapper {
top: 0;
}
sticky-header-mobile.header-mobile{
top: 0;
}
.scrolled-past-header .header-navigation{
background-color:transparent!important;
}
.scrolled-past-header sticky-header-mobile.header-mobile {
background-color: transparent!important;
}
@media (max-width: 767px) {
body #shopify-section-template--22144887259424__16321237356a896dad{
margin-top: 0!important;
}
}
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025