Display Contempo Blogger Theme Sidebar on Laptop/PC Screens

We had several users asking us how to display Blogger Contempo theme sidebar on laptop/PC screen sizes, as by default, the sidebars is hidden unless the screen size is above 1440px.

Since that the new Blogger themes, which was recently released 4th week of March 2017, uses pretty much responsive CSS utilities, users can easily override theme layout by adding their own CSS, without editing each and every code inside Theme > Edit HTML.


Here's how to enable or display the sidebar on laptop or PC screens above 1024px in screen widtg but still displayed hidden on smaller screen sizes.

  • Go to Theme
  • Click at Customize
  • At Theme Designer select Advanced
  • Find Add CSS and insert below CSS markup:-

@media screen and (max-width: 1439px){
  .sidebar-invisible {
    -webkit-transform: translateX(0px)!important;
    -ms-transform: translateX(0px)!important;
    transform: translateX(0px)!important;
  }
  .centered-bottom,
  .centered-top-container,
  .centered-top-placeholder {
    margin-left:10%; /* adjust % accordingly */
    margin-right:-10%; /* adjust % accordingly */
  }
}

@media screen and (max-width: 1024px){
  .sidebar-invisible {
    -webkit-transform: translateX(-284px)!important;
    -ms-transform: translateX(-284px)!important;
    transform: translateX(-284px)!important;
  }
  .centered-bottom,
  .centered-top-container,
  .centered-top-placeholder {
    margin-left:auto;
    margin-auto:auto;
  }
}

@media screen and (min-width: 1440px) {
  .sidebar-container {
    margin-top: 0!important;
  }
}

  • Preview your changes
  • Click Apply to Blog

To check, narrow your web browser tab window accordingly & see the sidebar hidden on screen sizes lower that 1024px but emerges when screen displayed larger than 1025px.

Some quick note, the !important is used to make sure the custom codes added take precedence since that the responsive classes included by Blogger in injected later than the Theme styles.

12 comments:

  1. Kindly give some code to reduce space between sidebar and posts on all screens.

    ReplyDelete
  2. Linda M. WrightNovember 14, 2017

    thanku

    ReplyDelete
    Replies
    1. Your welcome @Linda. Glad you've stopped by...

      Best Wishes!

      Delete
  3. It does work, but the menu and more-- link become unstable and moves to the right on mobile phones, kindly modify the code.

    ReplyDelete
    Replies
    1. You can further add additional CSS to target your menu accordingly as the purpose of this tutorial/CSS technique is to learn on the new Blogger themes design/layout fundamentals without editing the Theme HTML itself.

      Delete
    2. Thanks, it works perfectly, will be obliged if you give CSS for the menu and page list, which moves towards the right.

      Delete
  4. How to add newer older post on post?

    ReplyDelete
  5. The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
    website development

    ReplyDelete

Insert search keyword(s) & press enter...

Subscribe & Get Latest Stories via Mail...

 
Our website development is made possible by displaying online advertisements.
Please consider supporting us & our projects by disabling your Ad Blocker. Thank You.
Our website requires javascripts turned on for best user experience.
Please consider to turn on your web browser javascript. Thank You.
GDPR: Data submitted at our site is managed by 3rd party processors. Read more on how data is collected, managed & processed at our site. Learn More