Desktop:
Mobile:
That’s the same colour code
Topic summary
A user running the Dawn theme seeks to make the announcement bar transparent on mobile devices, matching the desktop appearance.
Initial Solution Attempts:
- CSS code targeting
#MainContentwith negative margin was suggested but didn’t work when added to base.css - Proper placement in theme.liquid file before
</head>tag was clarified with specific code formatting
Successful Resolution:
- The transparent announcement bar issue was resolved by adding custom CSS in the correct location within theme.liquid
Additional Requests (Ongoing):
- Mobile header background color matching desktop (resolved - colors confirmed identical)
- Checkout banner image optimization for mobile (requires Shopify Plus plan)
- Moving account icon from bottom to top in mobile menu drawer (resolved with CSS)
- Removing social links/register option from menu (resolved via base.css)
- Removing footer badges (pending)
- Custom liquid video width issue - changing one video’s width affects others (pending)
New Participant:
- Another user joined asking for transparent announcement bar help, indicating previous solutions didn’t work for their site
The thread demonstrates typical Dawn theme customization challenges, with most issues resolved through CSS modifications in theme.liquid or base.css files.
1 Like