Want transparent announcement bar on mobile device

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 #MainContent with 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.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.

not working i added this in base.css file can you please guide me properly where i have to add this code?