How to remove the gap caused by using CSS or Javascript in the annoucement banner

Platform Notice: Data Center Only - This article only applies to Atlassian products on the Data Center platform.

Note that this KB was created for the Data Center version of the product. Data Center KBs for non-Data-Center-specific features may also work for Server versions of the product, however they have not been tested. Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.

*Except Fisheye and Crucible

Summary

The content on this page includes steps to customize or extend Atlassian software (adding/changing CSS rules, HTML, JavaScript, etc.). Per the Atlassian Support Offerings, support does not include customizations made to Atlassian products. Be aware that this material is provided for your information only and using it is done so at your risk.

If you have any questions about this or any customization, please ask the community at Atlassian Community or consider working with an Atlassian Solution Partner.

After adding custom CSS or Javascript via Configuring an announcement banner, you may notice a small gap after the navigation header. The gap is due to the default padding for the announcement banner, and may interfere with other applications such as Tempo, or may be simply unwanted.

Solution

The banner's default stylesheet includes an 8 pixel padding, and a 1 pixel border - giving it a minimum height of 17px, leading to the visible gap. Adding the following to your announcement banner will remove the padding and border:

1 2 3 4 #announcement-banner { padding: 0px !important; border-bottom: none !important; }

If you do not have an existing stylesheet, you'll need to wrap the above rule in a <style> tag, as below:

1 2 3 4 5 6 <style type="text/css"> #announcement-banner { padding: 0px !important; border-bottom: none !important; } </style>

When working with the announcement banner, you may also need to remove it from the database if you encounter any problems in displaying the updated announcement banner; or pages in Jira.

Updated on April 8, 2025

Still need help?

The Atlassian Community is here for you.