Sticky Transparent Header with White BG on scroll (trade theme)

MLCNZ
New Member
8 0 0

I am looking for the code to change header to sticky and transparent with white icons and text, then on scroll turn to white background and black text and icons 

 

I have tried multiple codes and none seem to work

 

Store is not live or mapped to a domain as yet. 

 

https://43bc2a-54.myshopify.com/

Replies 3 (3)

PageFly-Richard
Shopify Partner
4322 980 1639

Hi @MLCNZ 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

{% if template == 'index' %}
<style>

.header {
    position: fixed;
    width: 100%;
    top: 40px;
    transition: background-color 0.3s ease;
    left: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
}
.header.transparent {
background-color: transparent;
}

.header.black {
background-color: #fff;
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 %}

 

Hope this can help you solve the issue 

 

Best regards,

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

MLCNZ
New Member
8 0 0

Thank you I have done this;
1. the text and icons are in black on transparent, can we change to white

icon change to white.png

2. The white background on header when you scroll doesn't go full page? Can you advise.
White header.png

Thank you

MLCNZ
New Member
8 0 0

Hi, 
I have changed the icon and text colour to white: 
Header white icon.png

But on mobile it is stacked and needs some distance between the header and image banner. 
Can you help with this correction in the code? 
header mobile view.png