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
1035 157 154

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

View solution in original post

Replies 21 (21)

webwondersco
Shopify Partner
1035 157 154

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. 🙂
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
1035 157 154

@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. 🙂
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
1035 157 154

@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. 🙂
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
New Member
8 0 0

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
1035 157 154

@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. 🙂
webwondersco
Shopify Partner
1035 157 154

@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. 🙂
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
1035 157 154

@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. 🙂
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
1035 157 154

@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. 🙂
laurynaw1
Tourist
5 0 1

@webwondersco Password: Leauxleaux

Thank you

webwondersco
Shopify Partner
1035 157 154

@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. 🙂
webwondersco
Shopify Partner
1035 157 154

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

curator
Visitor
3 0 0

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
1035 157 154

@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. 🙂
curator
Visitor
3 0 0

it worked, thank you so much 🙂

curator
Visitor
3 0 0

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