Enabling fixed Sidebar for blogger Contempo template for screen sizes smaller than 1440px

Here is how to do it :

Add this code in your blogger template(where to add this code is mentioned before 2nd code snippet of this post) ,now the value 1300px is the screen size for which I want the sidebar to be always visible for, you can reduce this value as you like, but be aware that reducing this value to much smaller digit will result in showing the overlapped sidebar instead of content body for your blog readers who are using much smaller screen devices such as mobiles which you might not want to happen so be wise :

@media screen and (max-width: 1300px) {
  .sidebar-container {
    bottom: 0;
    position: fixed;
    top: 0;
  }
  .sidebar-container {
    left: 0;
    right: auto;
  }
  .sidebar-container.sidebar-invisible {
    -webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);
            transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);
  }
  .sidebar-container.sidebar-invisible {
    -webkit-transform: translateX($(sidebar.width * -1));
        -ms-transform: translateX($(sidebar.width * -1));
            transform: translateX($(sidebar.width * -1));
  }
 .page_body{margin-left: 5%;margin-right: 5%;}

}

The code has to be added right after this piece of code:

@media screen and (min-width: 1440px) {
  .sidebar-container {
    position: absolute;
    top: 0;
  }
  .sidebar-container {
    left: 0;
    right: auto;
  }
.sidebar-container .navigation {
display: none;
    
  } 
}

Modify the code which precedes the above code in the following way:

@media screen and (max-width: 1439px) {
   
  .sidebar-container {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 30;
  }
  .sidebar-container {
    left: 0;
    right: auto;
  }
.sidebar-container .sidebar-back {display:none;}

 .page_body{margin-left: 250px;}
 .sticky .hamburger-menu {display: none;}
 .hamburger-menu{display: none;}
}
For your reference the original version of above code looks like this:

@media screen and (max-width: 1439px) {

  .sidebar-container {
    bottom: 0;
    position: fixed;
    top: 0;
  }
  .sidebar-container {
    left: 0;
    right: auto;
  }
  .sidebar-container.sidebar-invisible {
    -webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);
            transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);
  }
  .sidebar-container.sidebar-invisible {
    -webkit-transform: translateX($(sidebar.width * -1));
        -ms-transform: translateX($(sidebar.width * -1));
            transform: translateX($(sidebar.width * -1));

  }}
That's it !!!

Update:

I have added the following changes(screen size changed from 1300 to 1365 in my case and the additional highlighted snippet) to show the sidebar menu button only when sidebar is not visible after implementing the logic discussed in comments section below to keep the menu button available for other screen sizes:


Snippet:
@media (min-width: 1366px) and (max-width: 1439px) {
.sticky .hamburger-menu {display: none;}
 .hamburger-menu{display: none;}

}

Comments

  1. Can you post how to show sidebar on laptop or PC screens above 1024px in screen width but displayed hidden on smaller screen sizes.

    ReplyDelete
    Replies
    1. For doing that you just need to set the values as 1024px where I have set it as 1300px
      in this line: @media screen and (max-width: 1300px) ,see 1st snippet in post above and then adjust the margins accordingly in the same snippet in this line :
      .page_body{margin-left: 5%;margin-right: 5%;} and also in the 2nd last snippet in this line :
      .page_body{margin-left: 250px;}

      Delete
    2. Thanks, appreciate the reply, this works and should be most useful to all those using this template.

      Delete
  2. Hi, thanks for the code, it works perfectly. However, I'd like to have the hamburger button appear when the sidebar collapses, but with this code it always stays hidden. Can you tell me how to modify the code so that the hamburger menu appears on screens smaller than what I set for the fixed sidebar? Thank you!

    ReplyDelete
    Replies
    1. For doing that:
      In the second snippet the one with@media screen and (min-width: 1440px) appended the following line of code :
      body.sidebar-visible .page_body {
      overflow-y: auto!important;
      }
      right after this section: .sidebar-container .navigation {
      display: none;

      }
      but before the ending curly brace }
      Next modify the 3rd code snippet in the post above the one with @media screen and (max-width: 1439px)
      to comment the lines(if you want you can remove them but i prefer commenting instead of removing just in case I need to rollback) which is hiding the menu button like this:

      < ! - - .sticky .hamburger-menu {display: none;} - - >
      < ! - - .hamburger-menu{display: none;} - - >

      This will make the button visible but creates other problems which should be handled like sidebar is opening but the menu button is getting hidden behind it etc so to handle that here is the code that you need to append to that(3rd) snippet right after the 2 lines that we just commented above using< ! - - CodeExample - - > , but again this should be added just before the final closing curly brace } this will keep the menu button visible and sidebar operational:

      .sidebar-container {
      width:100%!important;

      }
      .sticky .hamburger-menu {margin-top: 0px!important;}
      .hamburger-menu {
      float: right!important;
      margin-top: -4px!important;

      }
      body.sidebar-visible .page_body {
      overflow-y: auto!important;
      }
      .dim-overlay {
      background-color: transparent!important;
      z-index:10;
      }

      Note:The menu button is visible in left side when the stick header is on and on the right when the sticky header is not on, I had to do this to prevent the lock situation which was occurring as sidebar was opening from left covering the menu button leaving no option to close it back.

      Delete
    2. Thank you so much for your reply! I thought I'd get notified so I didn't see it until today unfortunately! I managed to make the hamburger button visible quite quickly, but then I was struggling for ages with the functionality of the sidebar. I wish I had seen your reply! In the end, I fixed the problem by changing the z-index in the first bit of the code to 300, so that the sidebar would stay above the gray overlay. I will go through your code and see how that looks though! Thanks!

      Delete
    3. Setting too high value for z-index of sidebar will also make it overlap the sticky header which I didn't wanted, so as a workaround I changed the overlay back-ground color to transparent and its z-index value to just the value required to keep the sidebar and page body working, also I have updated the post to resolve one more issue, try both ways (yours and this one )and keep what caters your need and suits you more.

      Delete
  3. Make sure to remove extra spaces from comment part ie. this section < ! - - and this section - - > which I had to put to print the comment here as else it was stripping the part of comment in between them making it meaningless.

    ReplyDelete
  4. hello brother i dont understand how to do... please help me

    ReplyDelete
    Replies
    1. my mail id to contact me personally
      dinesharul27@gmail.com

      Delete
    2. In which part you are facing issues ?

      Delete
    3. from the beginning.. which code have to copy and where to past and changes to make ??

      Delete
    4. All this code is going in your template HTML near lines numbers falling between range 1338 and 1422(could be different for you based on your previous customization's to template), in case you are not aware where to find this, it's located in blogger dashboard>>Theme>>Edit HTML,all the other details related to where the changes are required is mentioned in post above already.

      Delete
    5. Iam sorry...still i have no idea.. code is ok... i have to copy all these code into my theme html.... but in which part or line ??

      Delete
  5. Hi, thanks a lot for your tips!
    Can you help me to fix sidebar for Soho template?

    ReplyDelete
    Replies
    1. I don't see any reason due to which these changes won't work in Soho as all these templates are basically build on same structure with just little bit cosmetic changes that I am sure you can fix with CSS, try it and let me know if you face any issue and be sure you take a backup of your template before making these changes.

      Delete

    2. Before asking for help, I tried using the same code with Soho, but it did not work. The menu at the top and the vertical scroll bar in the side menu remain.

      Delete
    3. In that case I will check it out and let you know once I get some free time.

      Delete

Post a Comment

Popular posts from this blog

Adding code prettify to Blogger

Adding copy to clipboard button to every google code prettify pre blocks in blogger