How can I integrate an image banner with my header?

How can I integrate an image banner with my header?

LucySerafini
Tourist
5 0 1

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. 

Replies 6 (6)

Moeed
Shopify Partner
6736 1820 2202

Hey @LucySerafini 

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


LucySerafini
Tourist
5 0 1

Hi Moeed, 

 

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

Moeed
Shopify Partner
6736 1820 2202

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:

Moeed_0-1697524299619.png

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


LucySerafini
Tourist
5 0 1

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. 

ramirox
Visitor
2 0 0

I see you were able to complete your modification beautifully.  Can you please let me know how you did it?

MADSECONDHAND
Visitor
1 0 0

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!