Incorporating Image Banner to Header

[LucySerafini]

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. 

[Moeed]

Hey @LucySerafini 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[LucySerafini]

Hi Moeed, 

This is my URL https://sea-coins.myshopify.com/ that would be all you need, I think. 

[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

[LucySerafini]

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.