Forums

Articles
Create
cancel
Showing results for 
Search instead for 
Did you mean: 

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

satyanarayana_singamsetti
Contributor
September 17, 2024

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:

Announcement_banner.PNG

 

Main Menu:

Main_Menu.PNG

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

 

1 answer

1 accepted

0 votes
Answer accepted
Sergei Troshin
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 19, 2024

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
Contributor
September 19, 2024

HI,

Thanks for the suggestion.

I tried code and seems like its not working.

Sergei Troshin
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 20, 2024 edited

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.

Like • Filipi Lima likes this
satyanarayana_singamsetti
Contributor
September 22, 2024

Hi,

 

It worked.

Thank you

 

Regards,

Satya

Sergei Troshin
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 23, 2024

That's great! Have a nice day!

Sergei Troshin
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 6, 2024

Hi @satyanarayana_singamsetti

Can i ask you accept answer if it possible?

Suggest an answer

Log in or Sign up to answer