I'm using a customized version of a sidebar, with disabled responsiveness.
A customized version of it can be found on this jsfiddle (Please see the full fiddle for the rest of the code).
#sidebar-wrapper {
box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.6), 0 0 50px 1px rgba(255, 255, 255, 0.5);
z-index: 1000;
position: absolute;
right: 250px;
width: 250px;
height: 100%;
margin-right: 0%;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
How can I prevent that it moves with a changing screen size? Even though I change all parameters with % to fixed pixel sizes, it still keeps moving around when I adjust the screen size. When I try to change the position from absolute to relative, it just breaks down horribly, and I don't know why.
I'm trying to create a non-responsive site, where everything is fixed and doesn't move around when adjusting screensize.
Does anybody have an idea on how to make the sidebar's position fixed in its place?
Thank you!
Try changing the #sidebar-wrapper from right:250px to lets say left:750px; As at the moment you are saying that the side-bar is always 250px from the right of the screen.