Reduce Announcement Bar Height - Impulse Theme

Store Design

Topic summary

A user seeks help reducing the announcement bar height in Shopify’s Impulse theme, finding it too tall and unable to locate the correct code to modify.

Solutions Proposed:

  • Multiple users suggested adding CSS code (padding: 0 or padding: 3px 0 !important) to theme.css, base.css, or style.css files
  • One suggestion involved adding code above the </head> tag in theme.liquid

Issues Encountered:

  • The user reports base.css doesn’t exist in their theme
  • Initial CSS suggestions didn’t work
  • One attempted solution broke the header, making the announcement bar larger instead of smaller and causing text to disappear

Current Status:
The discussion remains unresolved. Despite multiple attempts with different CSS approaches and file locations, none of the proposed solutions successfully reduced the announcement bar height. The user continues seeking a working solution.

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

Try to add !important like this.

.announcement-bar {
    padding: 3px 0 !important;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!