All things Shopify and commerce
Hi All,
I am hoping from some advice. I am trying to make my image banner combine with my header so that it looks like a background behind my menu and logo. But I want a solid colour to fill the sticky header like normal when I start scrolling. Here is a link for a website that have the same feature that I want to achieve. https://soleilsoleil.com.au/
I would appreciate any help.
Hey @LucySerafini
Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!
Best Regards,
Moeed
Hey @LucySerafini
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
{% if template == 'index' %}
<style>
@media screen and (min-width: 768px) {
div#shopify-section-sections--20810590781755__header {
margin-bottom: 0 !important;
}
sticky-header.header-wrapper.color-background-1.gradient {
background: transparent !important;
}
.utility-bar.color-background-2.gradient.utility-bar--bottom-border {
background: transparent !important;
z-index: 99999 !important;
position: fixed !important;
width: 100% !important;
}
main#MainContent {
margin-top: -210px;
}
ul.list-menu.list-menu--inline li a {
color: white !important;
}
.announcement-bar__message {
color: white !important;
}
.header__icon .icon {
color: white !important;
}
}
</style>
{% endif %}
RESULT:
PS: I've applied the code for you already.
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hi Moeed,
That is amazing, thank you. The only thing I want to change is when I scroll, I want the head to go background of the head to go back to being a solid colour (like what was there before), hopefully that makes sense.
I see you were able to complete your modification beautifully. Can you please let me know how you did it?
Hi there,
Are you able to assist me in doing this for my website? I am having issues with removing the background from the header so that it blends with my video banner. I then want to be able to have a sticky header that appears when scrolling down/up!
2m 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, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025