I would like to gain some screen estate when viewing Stack Exchange sites. The sidebar seldom shows information I need.

  • I know most help content displayed when composing questions.
  • Most related answers are found by the same search that already brought me to the question I am currently viewing, so I already have them open in other browser tabs anyways.
  • Hot Network Questions always distracts me to scifi.

I know there is a userstyle to hide the Hot Network Questions and one that completely removes the sidebar leaving an ugly hole where it once was. Is it possible to hide it and have the question, list, or whatever content takes the main part of the page expand to claim its place?


Okay, the following Stylish style should be a good start.

You can also see / install it at userstyles.org.

@namespace url(http://www.w3.org/1999/xhtml);

    domain("askubuntu.com"), domain("mathoverflow.net"), domain("serverfault.com"), domain("stackapps.com"),
    domain("stackexchange.com"), domain("stackoverflow.com"), domain("superuser.com")
    #sidebar {
        display:                none !important;
    #mainbar, .mainbar, #questions, .question-summary, #answers, .answer {
        min-width:              728px !important;
        width:                  100% !important;
    .summary {
        min-width:              630px !important;
        width:                  calc(100% - 120px) !important;
    .question > table {
        width:                  100% !important;
    .post-text, .wmd-preview, .post-editor, .wmd-input {
        min-width:              660px !important;
        width:                  100% !important;
    .wmd-button-bar {
        min-width:              634px !important;
        width:                  100% !important;


  • This has not been extensively tested and only on Firefox, but it should work with stylish for Chrome, Opera, etc. too.
  • I don't use this style. Support for this low demand functionality will be limited.
  • That is a very good start. On the question pages, it does exactly what I want. Other pages are still slightly misformatted. Would you be willing to post it on e.g. GitHub? This would make it easier to point to the places it still lacks and improve upon it. – XZS Oct 30 '15 at 12:35
  • i edited the width of the #mainbar to 50%. My requirement is to keep the default content width setting. But when I reduce the size of the window width, it should still to stay the same width. – tinker Apr 28 at 7:22
  • I still needed this script, because simply hiding using, #sidebar { display:none !important; } , the content width will be shrinked too small, when the window width is reduced. (Eg. I put my monitor in portrait mode, and maximise the window) – tinker Apr 28 at 7:26
  • Stylus extension is now recommended over Stylish (privacy concerns). – tinker Apr 28 at 9:48

and this too: StackOverflow CodeBox Options



I made a userscript that allows the user to toggle the visibility of the sidebar (the userscript's source code is also on GitHub):

// ==UserScript==
// @name         Toggle the right sidebar
// @version      0.4
// @author       double-beep
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/(questions/\d+/|review/*)
// @exclude      /^https://*.*/review/(suggested-edits|reopen)/*
// @exclude      /^https://*.*/review($|.*/(history|stats)$)
// @updateURL    https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function($) {
  $('.-secondary').append('<li class="-item"><a class="-link" id="hide-sidebar" title="Toggle visibility of right sidebar">&#10095;</a></li>');

  function defineOnClick() {
    const sidebar = $('#sidebar, .sidebar'), mainbar = $('#mainbar, .mainbar');
    $(document).on('click', '#hide-sidebar', function() {
      if (sidebar.is(':visible')) {
        mainbar.animate({'width': '100%'}, 200);
      } else {
        mainbar.css('width', 'calc(-324px + 100%)');
  if (window.location.pathname.match(/\/questions\/\d+/)) defineOnClick();

  var origOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function() {
    this.addEventListener('load', () => {
      if (this.responseURL.match(/\/review\/(next-task|task-reviewed)/)) defineOnClick();
    origOpen.apply(this, arguments);

The button is in the menu bar:

  • interesting. I tried this, it works but i can't click the same button to unhide it. useful if it can hide by default too. – tinker Apr 28 at 9:41
  • to run this, need to install tampermonkey, on chrome/firefox. – tinker Apr 28 at 9:46

Nice small chrome extension. Adds a toggle button to show/hide. Minor con though, it shows the sidebar for a millisecond before the javscript kicks in.

Toggle Stackoverflow sidebar - Chrome Web Store

enter image description here


You can find my plugin which does just that for Firefox here.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .