Bar announced ajust

Store Design
,

Topic summary

A user seeks help removing blank space left over in an announcement bar image on their online store.

Two solutions provided:

  1. Custom CSS approach: Add CSS code to Online Store > Themes > Customize > Custom CSS targeting .announcement-bar__message with padding and min-height adjustments.

  2. Theme file editing: Navigate to Online Store > Themes > Actions > Edit Code > base.CSS and add CSS code at the end of the file targeting the announcement bar section with specific height and width properties.

Both responses include code snippets and reference accompanying screenshots showing the implementation steps. The issue appears to be a spacing/formatting problem with the announcement bar header element that can be resolved through CSS modifications.

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

IMG_3097.jpeg
IMG_3097.jpeg1170×2532 216 KB

hi guys

Hello guys, can you help me remove this blank space that was left over as it is in the image?

https://www.behumblee.com/

Pass-Humblee3030

2

Hi @Suco

Please go to Online Store > Themes > Customize > add this code to Custom CSS.

.announcement-bar__message {
    padding: 0.5rem 0 !important;
    min-height: auto !important;
}

Screenshot_2.jpg
Screenshot_2.jpg525×160 11.8 KB

3

Hello @Suco
Go to online store ---------> themes --------------> actions ------> edit code------->base.CSS
at this code at the very end of the file.

body:has(.section-header .drawer-menu) .announcement-bar-section .page-width {
height: 30px;
}

and the result will be

26.png
26.png425×622 121 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks