A user is implementing a transparent header that transitions to black on scroll for their Shopify store using the Fresh theme. The initial code works on the homepage but creates an incomplete black bar when scrolling.
Key Issues Identified:
Solutions Provided:
PageFly-Richard suggested:
</head> tagAnshul_arora offered:
</body> tagCurrent Status:
The discussion remains unresolved. While the full-width black background now works across all pages, the user still needs a solution that combines both the transparent initial state and the black background on scroll for all pages, not just the homepage.
Hi I am trying to get a transperent background on menu, but when I scroll I want it to be black. I used this code, it works but when I scroll the black part ins not a full line. How to fix that? Thanks
{% if template == ‘index’ %}
.header { position: fixed; top: 40px; transition: background-color 0.3s ease; } .header.transparent { background-color: transparent; } .header.black { background-color: #000000; top:0; }{% endif %}
Hi @CampingYard
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the 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
Also i can see that your site looks very nice, warm and elegant, however i have noticed one thing, at the bottom of your home page is the contact form here:
You can consider to remove it, keep one from the above, or you can move this form to the center of the page, for the customer can easily to interact with it.
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Hello @CampingYard ,
I understand you are looking to maximize the width of the header menu when visitors scroll the page.
You can implement this change with the CSS code.
Please add the below-mentioned CSS code at the bottom of the theme.liquid file before tag and save.
Output -:
I hope the code helps you.
Please share if you have any queries.
Thank you.
I added it and it works BUT it change the menu only on my home page. The code is not working for other pages. I put the code in theme.liquid and works for the home page.
Where else should I add it? I tried in header.liquid but it’s not changing. All other pages than the home page, the scroll effect is not working
Hello @CampingYard ,
I have checked the other pages of the store as well.
The header navigation menu has a white background and white text, so the menu bar is not visible on other pages.
I have shared a code that can assist you in making the menu bar full-width & background color: black.
Please add the below code at the bottom of the theme.liquid file before tag and save.
header.header.header--middle-left.header--mobile-center.page-width.header--has-menu.header--has-social { max-width: 100% !important; background: black; } sticky-header.header-wrapper.color-scheme-2.gradient { background: black; max-width: 100% !important; }Output of the pages will be like this -:
I hope the code helps you.
Please share if you have any queries.
Thank you.
Thanks. That worked for the black background, but I lost the transparent scroll effect. Is it possible to make it transparent and black after scroll?
