Dawn Theme Header Transparent -Not aligned?

[nep]

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 %}

[PageFly-Henry · 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

[PageFly-Henry · 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

[nep]

Thank you Henry!

[PageFly-Henry]

You are welcome @nep 😊

[Dan-From-Ryviu · Accepted solution]

Hi @nep 

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

[nep]

Can't believe I missed that...

It works, thank you so much!

[Dan-From-Ryviu]

Happy I can help!