0

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!

10
  • As I said, whenever I change the position from "absolute", to anything else, the whole sidebar disappears
    – Kotoriii
    Jun 17, 2015 at 1:07
  • page-content-wrapper still has a % width Jun 17, 2015 at 1:08
  • @MattHammond I changed that too, and it still gives me problems. I removed everything with % from the HTML and CSS on my IDE, and it still will move around. It's quite frustrating.
    – Kotoriii
    Jun 17, 2015 at 1:10
  • Sorry I'm little confused on what your after. Jun 17, 2015 at 1:19
  • @MattHammond I want to use a let's say 960px width for the page. So when let's say a mobile device access it, they will see the desktop page. If I'm not mistaken, right now, if they access the page, they will see the sidebar on a position that was not originally meant to be. Right now, any elements on the page stay in place, and can be accessed by scrolling, but sidebar keeps moving (like a responsive bar would) and is never behind the scrollbar.
    – Kotoriii
    Jun 17, 2015 at 1:21

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.