[Solved] Fixed Sidebar Nav Maintaining width on Responsive Site

[CharismaSolutions]

Hi, I am doing a client’s site and she likes the left and right fixed links instead of a traditional header menu. You can see it here: http://rupaali.com

I am using this code (with modification): http://codepen.io/gianmichelle/pen/xpwEh to achieve the effect.

The issue is that the left side is fixed to the content edge, so when the browser is resized the sidebar changes width and sometimes disappears (see it at http://rupaali.com)

I need the left side to position to the browser edge instead of the content. Please Help!

I hope this makes sense. The left side’s style is as follows:

[MOD EDIT – Codedump Removed]

[Paulie_D]

Please…no CodeDumps (especially unformatted ones).

A Codepen is more that sufficient.

[Paulie_D]

However, the issue is that the left sidebar isn’t fixed to the left hand side of the window. It’s just fixed 25% down from the top.

So, the first thing to do is fix it to the left.

.social {
  position: fixed;
  top: 25%;
  left: 0; /* here */
  display: block;
}

BUT, that will cause the menu to disappear because, you have shifted it over 320px.

.social ul {
  padding: 0px;
  -webkit-transform: translate(-320px, 0);
  -moz-transform: translate(-320px, 0);
  -ms-transform: translate(-320px, 0);
  -o-transform: translate(-320px, 0);
  transform: translate(-320px, 0); 
}

So, adjust that number down (or rather up since it’s negative) so something like 150px until you have the effect you are after.

Then you can do something similar to the right side menu.

[CharismaSolutions]

With a little moding, your solution worked perfectly, thanks!

[Author]

Posts