Making Banner merg into the Header section

vibehome · ‎03-08-2024

Hi there,

I would be grateful for any support regarding ' Making my Image Banner merg into the Header section ' similiar to the website: https://www.josephjoseph.co.uk

Currently I have 3 moving banners that autoslide and have seen a few websites like JosephJoseph that the banner merges into the header making it one large image but when you scroll or move the page it turns white so you can clearly see categories section.

Im wondering whats the best way for this to be done - your help and advise would be very much appreciated - I have taken a look online and seen some YouTube videos but hesistant incase I make a mistake and causes some problems.

Look forward to hearing from you, warmest regards Lukeeys

ThePrimeWeb · ‎03-08-2024

Hey @vibehome,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
sticky-header {
    background-color: transparent !important;
    transition: all 300ms !important;
}

body:has(.scrolled-past-header) sticky-header {
    background-color: white !important;
}

.section-header {
    position: fixed !important;
    width: 100% !important;
    top: 35px !important;
    transition: all 300ms !important;
}

body:has(.scrolled-past-header) .section-header {
    top: 0 !important;
}

sticky-header li,
sticky-header a,
sticky-header span,
sticky-header svg,
sticky-header p {
    color: white !important;
}

sticky-header span {
    filter: drop-shadow(1px 1px 2px black) !important;
}

body:has(.scrolled-past-header) sticky-header li,
body:has(.scrolled-past-header) sticky-header a,
body:has(.scrolled-past-header) sticky-header span,
body:has(.scrolled-past-header) sticky-header svg,
body:has(.scrolled-past-header) sticky-header p {
    color: black !important;
    filter: none !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-09-2024

Just add this part to the code as well, same instructions as above. Don't remove the previous code

<style>
.predictive-search__item-content * {
    color: black !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎05-17-2024

Hey @vibehome

You can add on this part,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
body:has(.scrolled-past-header) sticky-header #menu-drawer a,
body:has(.scrolled-past-header) sticky-header .menu-drawer__utility-links svg {
  color: #fff !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-08-2024

Hey @vibehome,

Can you share the link to your store? Thanks!

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

vibehome · ‎03-08-2024

https://www.discoverbargains.co.uk/

vibehome · ‎03-08-2024

Hi there, please see the url for my store 🙂

ThePrimeWeb · ‎03-08-2024

Hey @vibehome,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
sticky-header {
    background-color: transparent !important;
    transition: all 300ms !important;
}

body:has(.scrolled-past-header) sticky-header {
    background-color: white !important;
}

.section-header {
    position: fixed !important;
    width: 100% !important;
    top: 35px !important;
    transition: all 300ms !important;
}

body:has(.scrolled-past-header) .section-header {
    top: 0 !important;
}

sticky-header li,
sticky-header a,
sticky-header span,
sticky-header svg,
sticky-header p {
    color: white !important;
}

sticky-header span {
    filter: drop-shadow(1px 1px 2px black) !important;
}

body:has(.scrolled-past-header) sticky-header li,
body:has(.scrolled-past-header) sticky-header a,
body:has(.scrolled-past-header) sticky-header span,
body:has(.scrolled-past-header) sticky-header svg,
body:has(.scrolled-past-header) sticky-header p {
    color: black !important;
    filter: none !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

vibehome · ‎03-09-2024

Thank you so much, I have done that now and very pleased with it 🤗

Just a quick one, my logo has a white background around it and wondering what is the best thing for this to blend in?

Warmest regards Luke 🤗

ThePrimeWeb · ‎03-09-2024

You should redo your logo with transparent background as a png file.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

vibehome · ‎03-09-2024

Wow thank you for your help with this. I will do that now. I’ve been playing with some of the colour themes to adjust visibility and when you search for a product in the search bar and the results drop down - the product title shows as white and can’t see the font. Any ideas of how this is fixed? I’ve gone through all the settings and can’t find anyway of fixing. Much appreciate your help with this. Warmest regards Luke

ThePrimeWeb · ‎03-09-2024

Just add this part to the code as well, same instructions as above. Don't remove the previous code

<style>
.predictive-search__item-content * {
    color: black !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

vibehome · ‎03-09-2024

Thank @ThePrimeWeb Your support is very much appreciated. Are there any services from you that you would recommend for my website?

vibehome · ‎03-09-2024

Last thing I promise 😬

The basket image disapears sometimes - for example on this page when you go onto a product page : https://www.discoverbargains.co.uk/products/mens-moccasins-suede-sheepskin-lined-house-loafers-slipp... - the basket image does not show but when you drag it down it shows. How can this be fixed please?

I have attached a screenshot so how what it clearer.

Warmest regards Luke

ThePrimeWeb · ‎03-09-2024

Hey @vibehome,

Follow the same steps and add on this code as well.

<style>
sticky-header svg {
    filter: drop-shadow(1px 1px 2px black) !important;
}
</style>

Regarding the services, I'm not sure what you require. If you have any in mind, then my website is in my signature below.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

vibehome · ‎05-17-2024

Hey there, yes I've noticed this aswell - when you tap on the main menu bar and the drop down box shows - the font is white and contrast the page nicely and you can see the menu options clearly.

But like you say when scroll down the page and then click on the menu bar the font goes black and can’t see the menu options.

Does anyone know how to fix this please? I’ve attached photos of what I mean 👍

Please someone help - warmest regards Luke

AhmadS · ‎04-07-2024

Can it be changed so that the header is transparent only for the home page and not for other pages.

Secondly, the header turns white after two Scrolls. If you have announcement bar, the header should turn white as you scroll once. But it turns white when past the header area.

vibehome · ‎05-17-2024

Hey there, yes I've noticed this aswell - when you tap on the main menu bar and the drop down box shows - the font is white and contrast the page nicely and you can see the menu options clearly.

But like you say when scroll down the page and then click on the menu bar the font goes black and can’t see the menu options.

Does anyone know how to fix this please? I’ve attached photos of what I mean 👍

Please someone help - warmest regards Luke

ThePrimeWeb · ‎05-17-2024

Hey @vibehome

You can add on this part,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
body:has(.scrolled-past-header) sticky-header #menu-drawer a,
body:has(.scrolled-past-header) sticky-header .menu-drawer__utility-links svg {
  color: #fff !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? [email protected] or check out the website
Check out our interview with Shopify!

vibehome · ‎05-17-2024

krishnatulasi · ‎06-17-2024

Hi, I tried this and it worked for me. But I want to apply this in my home page alone. How can I do that? Any help would be much appreciated. Thanks.

davetyler · ‎07-18-2024

Hi there,

This code works brilliantly for the home page of my site, however having a merged banner/header for the rest of the site doesn't work. Is there a way to apply this exclusively to the home page?

Thanks

stephhold3r · ‎08-30-2024

Hi there!

I installed it in my store, and it worked great. Thank you so much!

The only thing I would like to change is that when scrolling down, I don’t want the header to move; I prefer it to stay fixed at the top while keeping all the settings the same.

For example: https://1hourafter.com/.

Thanks again!

https://drive.google.com/file/d/1wKo0WL-YyyCUHxqHi9BRmGcefZKdQNhH/view?usp=sharing

Making Banner merg into the Header section

Making Banner merg into the Header section

Community Blog Articles