Create
cancel
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Atlaskit Left SideBar is overlapping Jira Nav Bar

AppsDelivered
Contributor
May 14, 2024 edited

Hey guys,

I'm currently working on a Jira customization using Atlaskit components and I've run into a tricky issue. The Atlaskit Left Sidebar is overlapping the Jira navigation bar, which isn't ideal. The sidebar seems to disregard the navigation bar's space and overlays on top of it, making some navigation links and controls inaccessible.

Does anyone have experience with this kind of issue or any suggestions on how I might resolve it? I’d really appreciate any tips or insights you could share!

image.png

My code:

import SideMenu from "./SideMenu.tsx";
import {Content, LeftSidebar, Main, PageLayout} from '@atlaskit/page-layout'

export default function GlobalPage() {
return (
<PageLayout>
<LeftSidebar
testId="left-sidebar"
id="left-sidebar"
skipLinkTitle="Left sidebar"
>
<SideMenu/>
</LeftSidebar>
<Content>
<Main>
<h1>Hello from Main</h1>
</Main>
</Content>
</PageLayout>

)
}

I forget to mention, that Main section is overlapped by left side bar, I don't know actually how to solve it.

1 answer

0 votes
Richard Cho - ServiceRocket
Contributor
May 14, 2024

@AppsDelivered can you try modifying the z-index and see if it fixes your issue?

AppsDelivered
Contributor
May 14, 2024

@Richard Cho - ServiceRocket Thank you for answer. I have tried already, it will just overlap the jira nav bar, and we won't see Dashboards and Jira logo.

Suggest an answer

Log in or Sign up to answer
DEPLOYMENT TYPE
CLOUD
PRODUCT PLAN
FREE
TAGS
atlassian, team '25, conference, certifications, bootcamps, training experience, anaheim ca,

Want to make the most of Team ‘25?

Spend the day sharpening your skills in Atlassian Cloud Organization Admin or Jira Administration, then take the exam onsite. Already ready? Take one - or more - of 12 different certification exams while you’re in Anaheim at Team' 25.

Learn more
AUG Leaders

Upcoming Jira Events