where should I paste the CCS code. into the theme liquid file or as a custom CSS on the header editing page
Topic summary
Goal: Make the Shopify header behave as a sticky-on-scroll-up bar that is fully opaque on page load, hidden on scroll down, and 75% opacity (translucent) when scrolling up. Later request: apply a blurred, transparent background effect when it appears on scroll up.
Proposed solution: One reply shared CSS for a fixed header with transitions and JS (custom.js) that detects scroll direction: it hides the header on scroll down, shows it on scroll up, and sets opacity to 0.75; resets to 1.0 on page load. They advised adding the script via . Another reply suggested adding code in theme.liquid after . OP asked where to place CSS (theme file vs. header custom CSS).
Updates: OP provided store URL and password for review. OP requested a blur effect (e.g., 5px) during scroll-up and later implemented the blur themselves. They now want the same blur applied to the side menu and the yellow area of the open dropdown.
Status: Partially resolved. Header blur added by OP; extending the blur to side menu and dropdown remains open. Images are provided to illustrate the desired blur look.