nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Need help to set mail menu and custom announcement-banner in JIRA fixed

satyanarayana_singamsetti

Hi All,
I would like to know is there any way to keep both Main Menu and announcement banner fixed / sticked on top of the screen even when we scroll down in dashboards or boards or issues?

I have two styles, one to fix Main menu and other is to fix Announcement banner.

But when I try to add both, Main Menu is getting disappeared.

Announcement banner:

Main Menu:

Can some one help me how to add both and make Main menu and announcement banner fixed on top of the application always.

Regards,

Satya

Accepted answers

Sergei Troshin_usua2u

Hi,

I think it is not a good idea to change the behavior of system elements. It can cause a lot of problems and bugs in the future, so use it with caution!

However, I found out that this code fixes both elements. Try it out, but in a test instance first!

#header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}

Hope it will help you!

All comments

Sergei Troshin_usua2u

Hi,

I think it is not a good idea to change the behavior of system elements. It can cause a lot of problems and bugs in the future, so use it with caution!

However, I found out that this code fixes both elements. Try it out, but in a test instance first!

#header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}

Hope it will help you!

satyanarayana_singamsetti

HI,

Thanks for the suggestion.

I tried code and seems like its not working.

Sergei Troshin_usua2u

Hi,

Sorry, I didn’t immediately understand what you wanted

Try pasting this code into your banner

EXAMPLE BANNER TEXT

<style>
#header {
position: fixed;
top: 0;
width: 100%;
z-index: 3000;
}

#announcement-banner {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}
</style>
<script>
function adjustOffsets() {
const header = document.getElementById('header');
const banner = document.getElementById('announcement-banner');
const content = document.getElementById('content');

const headerHeight = header.offsetHeight;
const bannerHeight = banner.offsetHeight;

banner.style.top = `${headerHeight}px`;
content.style.marginTop = `${headerHeight + bannerHeight}px`;
}

window.addEventListener('load', adjustOffsets);

window.addEventListener('resize', adjustOffsets);
</script>

This is more complex code. There is i wrote some code that adjust offsets of header and banner elements.

satyanarayana_singamsetti

Hi,

It worked.

Thank you

Regards,

Satya

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

server

jira

jira-server