How to solve logo banner issues with the Dawn theme?

Store Design
, ,
1

I’m working on designing a banner for my webpage, and I’d like to replicate the style of the banner found at https://sodah.co.uk/. Specifically, I want the top portion to remain visible but become transparent as users scroll down the page.

However, the current styling on my page is quite different. You can view my page at https://levimonet.com/password, and the password is ‘Levim.’ I appreciate any assistance in achieving the desired effect.

2

Hello @J-lGey , it’s a pretty easy task. Use the below JavaScript code as a start,

// JavaScript to change header to transparent on scroll
document.addEventListener('scroll', () => {
    const header = document.querySelector('.header');
    header.style.backgroundColor = window.scrollY > 0 ? 'rgba(255, 255, 255, 0.5)' : '#FFFFFF'; // Replace '#FFFFFF' with your initial header color
});

This code will change the top header/banner to transparent as the user starts scrolling. Adjust the colors as per your theme’s design.

3

what file would i attach that code to ?

4

Locate the main JavaScript file of the theme, or create a new one, and insert the provided JavaScript code. Please note that this code is intended as a starting point and hasn’t been tested. Modify it as needed to suit your requirements.