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;}

}

Update 2:

I see blogger template is now using different way in media queries to calculate max-width instead of direct integer values due to same reason for those who have new blogs they wont find 1440 px etc so please refer the below screenshot and add the highlighted code at provided line numbers to achieve the fixed sidebar in new contempo templates it will require little bit more work from your end to fix things for small screens accordingly as this is just a quick example: