Shopify Header Logo Modification - Hide on Load, Reveal on Scroll (Desktop Only)
Budget: ₹1,500 – ₹2,000 INR
I am seeking a Shopify developer with strong HTML and CSS and Basic JavaScript skills to modify my website's header for the desktop version. I have built the site so far, but I am stuck on this particular issue and need assistance.
Key Tasks:
- Desktop Homepage Only: The header logo should be hidden initially (opacity 0) on the desktop version of the homepage to avoid displaying two logos simultaneously (one in the header, one in the landing page content).
- Reveal on Scroll (Desktop): As the user scrolls down the homepage on desktop, the header logo should smoothly transition to full opacity (100) to become visible in the sticky header.
Preserve Existing Functionality: The existing logo shrinking effect on scroll should remain intact for desktop.
- No Changes to Other Pages/Devices: Leave the header logo as-is (initially visible) on all other pages and on mobile and tablet devices.
Skills & Experience:
- Proficiency in HTML, CSS and JavaScript
- Experience with Shopify theme customization
- Understanding of responsive design principles and media queries
Notes:
- Smooth Transition: The appearance and disappearance of the logo should have a smooth transition effect.
- Clean Code: Please ensure your code is clean and efficient. I will compare the code before and after your modifications, and any unnecessary code you add will be removed. This is an essential requirement for successful completion of the task.
- Desktop Only: These modifications should be implemented for the desktop version of the website only.
Key Tasks:
- Desktop Homepage Only: The header logo should be hidden initially (opacity 0) on the desktop version of the homepage to avoid displaying two logos simultaneously (one in the header, one in the landing page content).
- Reveal on Scroll (Desktop): As the user scrolls down the homepage on desktop, the header logo should smoothly transition to full opacity (100) to become visible in the sticky header.
Preserve Existing Functionality: The existing logo shrinking effect on scroll should remain intact for desktop.
- No Changes to Other Pages/Devices: Leave the header logo as-is (initially visible) on all other pages and on mobile and tablet devices.
Skills & Experience:
- Proficiency in HTML, CSS and JavaScript
- Experience with Shopify theme customization
- Understanding of responsive design principles and media queries
Notes:
- Smooth Transition: The appearance and disappearance of the logo should have a smooth transition effect.
- Clean Code: Please ensure your code is clean and efficient. I will compare the code before and after your modifications, and any unnecessary code you add will be removed. This is an essential requirement for successful completion of the task.
- Desktop Only: These modifications should be implemented for the desktop version of the website only.