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:


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
  6. I have problem to reduce or remove space between snippet to snippet in a contempo blogger theme. For sidebar I've success to make it move to the right and look like classic HTML style. Would you like tell me how to do?

    ReplyDelete
    Replies
    1. Hi Sofyan,
      To reduce space between 2 consecutive snippets switch to "html editor mode" when you are writing posts and remove any extra < /br > tags ,additionally when you are typing something and want to have less indentation between 2 line breaks trying making use of "shift+enter" key combination instead of using just "enter" and see if that helps.
      Thanks

      Delete
  7. Hi, thank you for this.
    I want to know how I could completely remove the sidebar and the sidebar icon so it's never there? Contempo theme. Really struggling.

    ReplyDelete
    Replies
    1. Hi Luke,
      This can be achieved by simply adding this CSS :

      .hamburger-menu {
      display:none!important;
      }
      .sidebar-container.sidebar-invisible {
      display: none!important;

      }

      Delete
  8. Even the suggestion are quite helpful, I have better idea especially when you have issue regarding to "calculating max-width instead of direct integer values" on sidebar. Hope it helps to future reader.

    I did calculation on max-width manually and found that it always resulted into width of 1440px if subtraction are ignored. Find the "" and just adjust all content, sidebar width and margin and ensure that the calculation resulted into your desirable resolution. In case of my blog, I modify these value in order to made the result as 1300. My note is, keep content width (CW), sidebar width (SW) and content margin (CM) proportional (CW:SW:CM ratio are 70 : 21,5 : 8,5 but I tend to ignore it by slashing content margin half).

    However, there's one problem that bugged me quite recently. The hamburger button for mobile, in my blog, is not working. Do you know how to fix this issue? Cheers!

    ReplyDelete
    Replies
    1. duh it published with my code missing, in case you don't figure it out, it's at "Group description="widths"". pardon for double-posting.

      Delete
    2. Thanks for you comment Setiap...I think it might be because in attempt to display sidebar all the time you might have removed some css and media queries which are required to handle the showing and hiding logic for the sidebar in smaller screens...

      I also noticed that even your sticky header bar is not working when scrolling up in small screens and also you sidebar is not fixed it scrolls one you scrolldown...there can be many reasons and with all the customization's that you have already made it will be hard to tell for me now....
      I also just realized few days back that sidebar and content section widths can be easily changed from settings available in temple designer instead of doing it from html editor...sometimes we get so indulged in solving a particular problem that we fail to see the options and solutions that are already available for us to use :)

      Delete
    3. Much thanks. Yeah, you pointed it out Kumar, yesterday evening I found my blog's header bar appear only when scrolling up, sometime doesn't, when tested on my mobile phone. For hamburger menu, it may be done by purging cookies, as it ran normally on incognito mode and my mobile phone. Oh my bad.

      Not to mention that sidebar widths and margins. Thanks for pointing it out, I don't aware for it when customising my blog on Template Editor.

      PS: just shorten my name as SGPC. ;)

      Delete
    4. Something I forget to add: Well, that mean I have to look into my source code for resolving header bar issue.

      Delete
  9. Hello, even on this site the 3 lines that the sidebar must display do not work, any ideas to make them work?

    ReplyDelete
    Replies
    1. Hi...I verified and observed that sidebar is visible for screen size smaller than 1440 px as per the css applied on this site and the menu button is also working fine in smaller screens as expected...can you please clear your browsers cache and cookies and try again...in case i haven't understood your question right please do let me know.
      Thanks

      Delete
    2. Hello, thanks for the answer, effectively reviewing my site on other computers works well, everything seems to indicate that the problem is the browser on the corporate network that I use at work, since other coworkers do the same, but outside everything works fine here, thanks.

      Delete
  10. Hi, Any idea to have side bar as well as Search bar on the right side in contempo theme like in emporio theme?

    ReplyDelete
  11. This really help. Thanks. please how can i move my sidebar to the right side of the page

    ReplyDelete

Post a Comment

Note:Please be gentle while commenting and avoid spamming as comment are anyways moderated thank you.

Popular posts from this blog

Adding Home Older Newer Post Buttons in new Blogger templates such as Contempo

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

Checklist: Before applying for adsense