How to remove the gap caused by using CSS or Javascript in the annoucement banner
Platform notice: Server and Data Center only. This article only applies to Atlassian products on the Server and Data Center platforms.
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
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 Answers or consider working with an Atlassian Solution Partner.
Purpose
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:
#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:
<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.