Solved

Dawn Theme Header Transparent -Not aligned?

nep
Tourist
5 0 2

Hi, I have been working on my homepage header. I implemented some code to make it transparent and display the background upon scrolling, as it sticks. I only have one problem, it doesn't conform to the center. I am not sure what I'm doing wrong. I would like some insight. Thanks.

Here it is,

https://neverendingplan.myshopify.com/ : bimoch

 

 

Here is the code in the theme.liquid

 

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

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

.header.black {
background-color: black;
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('black');
} else {
header.classList.remove('black');
header.classList.add('transparent');
}
});
</script>
{% endif %}

 

nep_0-1696554202596.pngnep_1-1696554226067.png

 

Accepted Solutions (2)

PageFly-Henry
Astronaut
790 215 189

This is an accepted solution.

Hi @nep 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

header.header.header--middle-center.header--mobile-center.page-width.black {

    max-width: 100% !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Dan-From-Ryviu
Shopify Partner
6973 1319 1342

This is an accepted solution.

Hi @nep 

Please add ";" after "max-width: 100%" to make your code work properly.

Screenshot 2023-10-06 at 08.41.07.png

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 6 (6)

PageFly-Henry
Astronaut
790 215 189

This is an accepted solution.

Hi @nep 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

header.header.header--middle-center.header--mobile-center.page-width.black {

    max-width: 100% !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

nep
Tourist
5 0 2

Thank you Henry!

PageFly-Henry
Astronaut
790 215 189

You are welcome @nep 😊

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Dan-From-Ryviu
Shopify Partner
6973 1319 1342

This is an accepted solution.

Hi @nep 

Please add ";" after "max-width: 100%" to make your code work properly.

Screenshot 2023-10-06 at 08.41.07.png

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

nep
Tourist
5 0 2

Can't believe I missed that...

It works, thank you so much!

Dan-From-Ryviu
Shopify Partner
6973 1319 1342

Happy I can help!

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now