☰

Discord (web) - Remove top bar in the new 2025 UI refresh

The bar is pretty useless and takes a ton of vertical space.

  1. /* ==UserStyle==
  2. @name           Discord (web) - Remove top bar in the new 2025 UI refresh
  3. @description    The bar is pretty useless and takes a ton of vertical space.
  4. @namespace      https://greasyfork.org/en/users/4813
  5. @author         Swyter
  6. @version        2025.03.28
  7. @license        CC-BY-SA 4.0
  8. @preprocessor   default
  9. ==/UserStyle== */
  10.  
  11. @-moz-document domain("discord.com")
  12. {
  13.     .visual-refresh {
  14.         /* swy: change the CSS variable so that the rest of the layout that goes below complies :) */
  15.         --custom-app-top-bar-height: 0px !important;
  16.     
  17.         /* swy: hide the top bar contents, otherwise some icons bleed through */
  18.         div[class^='container_'] > div[class^='base_'] > div[class^='bar_'] {
  19.             display: none !important;
  20.         }
  21.     
  22.         /* swy: restore the top padding for the sidebar server icon list (so that the Direct Messages button doesn't look weird) */
  23.         div[class^='sidebar_'] > nav[class^='wrapper_'] > ul[class^='tree_'] > div[class^='itemsContainer_'] > div[class^='stack_'] {
  24.             padding-top: 12px !important; /* swy: 12px is the original value */
  25.         }
  26.     }
  27. }
  28.