I need help offsetting the Sidebar via CSS. so it isn't stuck to the left-side of the browser window

Darryn March 26, 2023

I have edited the global Stylesheet so that our Confluence instance isn't stretching 3000px across our workplace's ultrawide displays.

Here's how it is vanilla (terrible)...

1.png

Some simple CSS code in the Global Stylesheet targeting the Page element, centred the page and added a max width:

#page {
min-width: 350px;
max-width: 1900px;
margin-left: auto;
margin-right: auto;}

Now it looks like this!

2.png

Great! Except the sidebar... Instead of the sidebar sitting inside the Page element (like normal wiki's - see Wikipedia for a correct example), the sidebar sits in the margin (boo!).

I think the classname acs-side-bar ia-scrollable-section affects the sidebar, meaning it doesn't move because the class Position is absolute?

.acs-side-bar {
position: absolute;
top: 0;
bottom: 40px;
width: 100%;
background-color: #f4f5f7;
}

I believe I need to offset the sidebar so it is relative to the the Page element, but I'm not very good at offsets.

Can someone please help on how I use the global stylesheet to offset the sidebar relative to the page element.

0 answers

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events