Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
Community Members
Community Events
Community Groups

Removing empty space between top of page and header image as well as the "All Systems Operational"

I am trying to remove the space in the two boxes shown in picture below but unable to find how to do this using custom CSS as we're not having custom domains. Any ideas?

I don't have any CSS knowledge so sorry if this is very simple.


1 answer

1 accepted

0 votes
Answer accepted

Hi @Harry Parfitt -


There's a bit of CSS needed since you aren't able to use Javascript. I've provided what is needed below to accomplish what you're trying to do.


Removing the spaces using CSS:

.layout-content.status .masthead-container.basic .masthead {
padding-top: 0px;
.layout-content.status .masthead-container .masthead {
margin-bottom: 0px;


 Removing the 'All Systems Operational' top level status banner using CSS:

.layout-content.status.status-index .page-status {
text-indent: -9999px;
margin-bottom: 0px;


.layout-content.status.status-index .page-status.status-none {
background-color: transparent;
border: 0px;


That will look something like this:



Hope this helps!

Good Morning @Mark Campbell-Vincent, Thank you very much for this it has provided exactly what we needed :)

Suggest an answer

Log in or Sign up to answer
Site Admin

Atlassian Community Events