can you please give password? i will check again
Topic summary
Goal: Make the mobile header transparent at the top and solid when scrolling, working on both home and product pages (Debutify theme).
What was tried:
- Added mobile-only CSS (@media max-width: 769px) to set .site-header transparent and .is-scrolling .site-header solid (#FDF6EF).
- Also added a rule positioning .header-section .header-container as absolute, which caused the logo to overlap the announcement bar on product pages.
Guidance provided:
- Remove the absolute positioning rule for .header-section .header-container to prevent overlap.
- Use the .is-scrolling class (applied when the page scrolls) to control the solid background, and place the rule at the bottom of theme.scss.liquid.
- Note: Debutify uses the same CSS classes across pages, so rules affect all pages.
Current issue:
- The user added two .is-scrolling rules (one with #FDF6EF and another with rgba(255,255,255,0.7)) and introduced a selector typo (.sit e-header), resulting in a semi-transparent header on scroll and a solid header at the top.
Status: Unresolved. Next steps are to keep a single, correct .is-scrolling .site-header rule with a solid color, remove duplicates/typos, and recheck on product pages. Code snippets are central to the solution.