How to move image banner behind Header (Dawn theme)

[arutze]

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:

This is how it looks now:

[webwondersco · 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 %}

[arutze]

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

[webwondersco]

@arutze , Yes, it's work fine.

changing the background image will not affect the current functionality.

[Glond]

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]

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

[taylor345]

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

[tallowbar]

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]

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

[webwondersco]

@taylor345 Could you please share your store URL?

[laurynaw1]

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]

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

[laurynaw1]

 

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. 

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

(correct way) 

(Wrong way)  

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

[webwondersco]

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

[laurynaw1]

@webwondersco Password: Leauxleaux

Thank you

[webwondersco]

@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]

@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.

[laurynaw1]

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]

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

[JordiP]

Store: https://bb9f8c-ac.myshopify.com/

Pass: pongia

[curator]

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]

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

header.header{
max-width:100%;
}

[curator]

it worked, thank you so much 🙂

[curator]

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]

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

[curator]

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]

Hi! @webwondersco 

I have added this code to my Dawn themed shop, and it works perfectly. 

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]

@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.

[YangLi]

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? 

[YangLi]

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. 

[webwondersco]

For that you must have to update the CSS.

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

[YangLi]

 

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?