Making Banner merg into the Header section

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

Hey @vibehome ,

Can you share the link to your store? Thanks!

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

Hi there, please see the url for my store :slightly_smiling_face:

Hey @vibehome ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.


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

1 Like

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

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 :hugs:

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

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

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


1 Like

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

Last thing I promise :grimacing:

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-slippers-grey-size-10-to-12 - 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

Hey @vibehome ,

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


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

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.

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 :+1:

Please someone help - warmest regards Luke

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 :+1:

Please someone help - warmest regards Luke

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 “” tag paste the following. Screenshot attached for reference.


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

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.

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

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