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

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

New Member
9 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.

Replies 3 (3)

Shopify Partner
4394 1005 1656



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

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

document.addEventListener('DOMContentLoaded', function() {
var header = document.querySelector('.header');

// Change header background on scroll
window.addEventListener('scroll', function() {
var header = document.querySelector('.header');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (scrollTop > 0) {
} else {
{% 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.

New Member
9 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

New Member
9 0 0

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