How to move image banner behind Header (Dawn theme)

Solved

How to move image banner behind Header (Dawn theme)

arutze
Explorer
47 0 18

Hi, I want to have my image banner only in the Main Page behind the Header in desktop and Mobile as well. But on a scroll down I want it to become white again.

 

This is how I want it to look:

Screenshot 2023-07-08 at 17.18.36.png

 

This is how it looks now:

Screenshot 2023-07-08 at 17.18.42.png

 

 

Accepted Solution (1)

webwondersco
Shopify Partner
1176 169 172

This is an accepted solution.

@arutze , Please add the below line CSS and Js at theme.liquid file. just before the ending of </body> tag.

 

{% if template == 'index' %}
<style>
.header {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: background-color 0.3s ease;
}

.header.transparent {
  background-color: transparent;
}

.header.white {
  background-color: #ffffff;
top:0;
}

</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var header = document.querySelector('.header');
  header.classList.add('transparent');
});

// Change header background on scroll
window.addEventListener('scroll', function() {
  var header = document.querySelector('.header');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  if (scrollTop > 0) {
    header.classList.remove('transparent');
    header.classList.add('white');
  } else {
    header.classList.remove('white');
    header.classList.add('transparent');
  }
});
</script>
{% endif %}
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

View solution in original post

Replies 31 (31)

webwondersco
Shopify Partner
1176 169 172

This is an accepted solution.

@arutze , Please add the below line CSS and Js at theme.liquid file. just before the ending of </body> tag.

 

{% if template == 'index' %}
<style>
.header {
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: background-color 0.3s ease;
}

.header.transparent {
  background-color: transparent;
}

.header.white {
  background-color: #ffffff;
top:0;
}

</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var header = document.querySelector('.header');
  header.classList.add('transparent');
});

// Change header background on scroll
window.addEventListener('scroll', function() {
  var header = document.querySelector('.header');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

  if (scrollTop > 0) {
    header.classList.remove('transparent');
    header.classList.add('white');
  } else {
    header.classList.remove('white');
    header.classList.add('transparent');
  }
});
</script>
{% endif %}
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
arutze
Explorer
47 0 18

wow thank you very much @webwondersco ! just one question, If I change my background image, it will still work right?

webwondersco
Shopify Partner
1176 169 172

@arutze , Yes, it's work fine.

 

changing the background image will not affect the current functionality.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
Glond
Visitor
1 0 0

Hi, i would like the same thing as @arutze

Should i copy the codes that you've sent above or they might have change now, due to updates?

 

Thank you in advance.

webwondersco
Shopify Partner
1176 169 172

@Glond IF you are using the same theme then it'll also work for your store

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
taylor345
Visitor
1 0 0

Hi, I tried using the code, it works, and i try to modify the color, but it turns out like this, can you help me which part I should modify to make it full width?

Thanks

sasas.jpg

tallowbar
Tourist
17 0 1

Hi! Just wondering if you figured out how to make it full width? I am having the same issue and increasing the width in the code doesn't seem to help. @webwondersco 

webwondersco
Shopify Partner
1176 169 172

@tallowbar Could you please share your store URL? so can check and figure it out

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
webwondersco
Shopify Partner
1176 169 172

@taylor345 Could you please share your store URL?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
laurynaw1
Tourist
5 0 1

Thank you for this @webwondersco ! Exactly what I needed, however it is not full width and I'm trying to make it centered but it is not budging. As well as making it a sticky header Any help?

webwondersco
Shopify Partner
1176 169 172

@laurynaw1 Sure could you please share your store URL and screenshot of exactly how you would like to display?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
laurynaw1
Tourist
5 0 1

IMG_6118.png

IMG_6113.png

 

Hello! @webwondersco  I would like the image to bleed all of the way through. Which we’ve accomplished with this code. But I want it to be fixed on the image banner only not scrolling down and it turns white. 

IMG_6119.jpeg

 and to have my menu drawer all white with the logo not the transparent with logo 

IMG_6117.png

(correct way) 

 

IMG_6116.jpeg

(Wrong way)  

 

Www.donleaux.com is my url. 
Thank you!

webwondersco
Shopify Partner
1176 169 172

@laurynaw1 The website is password protected. could you please share the front password as well?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
laurynaw1
Tourist
5 0 1

@webwondersco Password: Leauxleaux

Thank you

webwondersco
Shopify Partner
1176 169 172

@laurynaw1 Please add the below line of CSS at the end of your base.css file. You can find this file under assets folder of your theme.

 

body .header.transparent{
background-color:#ffffff;
}

 

Result:

webwondersco_0-1712168467362.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
webwondersco
Shopify Partner
1176 169 172

@laurynaw1 So, you want to keep the header as it is as of now. You just want to make the menu drawer with full width and have white background with logo of website?

 

If yes, then it is like need to add some custom code to your theme to make it possible.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
laurynaw1
Tourist
5 0 1

Thank you! It’s similar to the discount ones Brooklyn theme, but I believe I found a solution. Thank you for taking time to help.

JordiP
Excursionist
49 0 8

I am having this exact issue, I would be thankful to receive some help as I am struggling to find a solution.

JordiP
Excursionist
49 0 8
curator
Tourist
9 0 1

Thank you @webwondersco Its working for me but unfortunately its not full width.. running into the same issues as people above. Any chance you could please have a look? Thank you https://hvngglb39md9yf7s-83068584245.shopifypreview.com

webwondersco
Shopify Partner
1176 169 172

@curator PLease add the below line of CSS code at the end of your base.css file.

 

header.header{
max-width:100%;
}
Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
curator
Tourist
9 0 1

it worked, thank you so much 🙂

curator
Tourist
9 0 1

I have one more question if its ok.. Right now the font colour on the header is black, is there anyway to make it white when it's transparent so it's more easily visible? I tried so many things but nothing seems to work.. Thank you

webwondersco
Shopify Partner
1176 169 172

@curator Could you please store the link again? so can check and update you accordingly.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
curator
Tourist
9 0 1

Hello again 🙂 thank you so much for following up!

 

I managed to do the above and more  but I am stuck with one last issue.. trying to disable the transparent header on pages other than home page on mobile https://k4i6qlml42dqbvxe-83068584245.shopifypreview.com if you have any idea how I can do that it would be really really amazing its the last thing I need figuring out and then I am "done" 

YangLi
New Member
4 0 0

Hi! @webwondersco 

I have added this code to my Dawn themed shop, and it works perfectly. Screenshot 2024-09-27 213154.pngScreenshot 2024-09-27 213212.png

One problem though, it seems like it divides the header text when entering Mobilemode. Can you help me here, so the text stays over the image? 

webwondersco
Shopify Partner
1176 169 172

@YangLi Yes sure.

 

Could you please share the URL of your store and also highlight the issue with some borders so Can get better idea.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
YangLi
New Member
4 0 0

Hi again! 

Here it is - https://3dd6bb-5b.myshopify.com/

Passcode: Myni123


Ideally, it would like it to be behind the column underneath as well, so it would look somehting like this (This is just a picture I got made as a draft)  Would that be possible as well? 
123 (1).jpg

YangLi
New Member
4 0 0

Hi again, 

Another quick question. I have implemented the code, and now the header is sticky/ turns white when I scroll down the page. This is the case for both dekstop and mobile version. 

Could you assist me here as well?

Thanks in advance - I have tried attaching pictures. 

Screenshot 2024-09-28 153426.pngScreenshot 2024-09-28 153435.png

webwondersco
Shopify Partner
1176 169 172

For that you must have to update the CSS.

 

could you please share what CSS you have added for the sticky header.

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
YangLi
New Member
4 0 0

IMG_8869.png

Hi:) 

 

I have added the code you suggested to make the image banner go behind the header. I have attached a photo:) 


i don’t know, why the header becomes sticky and turns white, since I don’t think that I have it enabled in my theme settings. 

I have the Dawn theme. 

Do you have any idea, what CSS I should use to make the header work normally?