The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Fixed Sidebar Nav Maintaining width on Responsive Site

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #200956

    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:

    I am using this code (with modification): 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

    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]


    Please…no CodeDumps (especially unformatted ones).

    A Codepen is more that sufficient.


    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.


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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.