Download Source Code
Sign in to like
Made by:
Release date:
29th January, 2019

Horizontal Server List

46.4K 95.4K 56

Moves the server list from the left to the top of Discord. Compatible with Server Folders and most basic transparent themes.

Comments (20)

Found a bug for Horizontal Server List? Report it here

Sign In to post a comment

Alexander Sparke

Which variable is it to change the size of the serve r icons?

Baut _

Brilliant theme! Love how convenient and clutter free it looks now. How can I change the background colour to rgba (0,0,0,0.3)?
Much appreciated.


How do I make them smaller?


I found it. Plus can someone send me the code for the bottom version (all the code from the beginning) because I don't know css or any language for programming, so I can copy-paste it?


Look at his pinned comment, for how to put it at the bottom. You literally copy+paste that line from his comment into the file that you downloaded already. You don't have to do anything special.

Jack Jensen

Yo hi, whenever I disable this theme, somehow my server icons still horizontal instead of resetting to the default view. Any fixes? Even if I remove the theme from my theme folder, same thing happens.


Make sure you don't have anything in your Custom CSS editor


is there any way to center them


Not without causing issues.


ok thank you


First off, I just wanna say I love the idea of the horizontal server list. I'd really like to use it but it seems to break with my Clearvision theme. The server icons are shifted up, there is a blank gap where it seems those icons should be, and I cannot click the server icons except for a tiny gap on the bottom edge of the icons.

I tried it without ClearVision, works perfectly fine. I downloaded the theme using your interactive editor here:

My discord information:
BandagedBD v0.3.5
Discord PTB 0.0.51
OS: Mac Catalina 10.15.7


The issue is with ClearVision and adding it's version number to the app buttons for MacOS.
Add these at the very end/bottom of your ClearVision_v6.theme.css file.

.platform-osx #app-mount .wrapper-1Rf91z {
    padding-top: 0;
    margin-top: 32px;
#app-mount .typeMacOS-3EmCyP {
    height: 32px;
    align-items: flex-start;
#app-mount .typeMacOS-3EmCyP:before,
#app-mount .typeMacOS-3EmCyP:after {
    content: none;

Like so:

Jean-Juste Lefebvre

Can you make Discord logo not to scroll, make it fixed? I have a lot a servers, and it's annoying to scroll through all of them up to the Discord logo to access my private messages.


I can do that. Will I though? No. Just press CTRL + 1 to get to your DMs

Anshu K



Would be awesome if unread message line icon was around the server icon or something.


Not the point of the theme. You could possibly find another theme that does that though.


Im having some problems related to overlapping in the discord "Home" button.

[EDIT] It would be cool to have some variables to edit each individual icon/text.


While that would be cool it is not possible with Discord server structure.


hello ^^ I love this theme it's threshold that I just needed how I can change the font of the theme?


Did my website mess up or did you actually post that here?

JakkuOL '·

How can I make the icons bigger?


Go to the theme .css and change the size.

H e n r i q u e F r e i t a s

Poderia me dar uma explicação mais detalhada sobre colocar a lista na parte inferior?

H e n r i q u e F r e i t a s

talvez eu nem olhe aqui denovo, discord:

  1. Copy the @import url("");.
  2. Open your HorizontalServerList.theme.css file location in your BetterDiscord themes folder.
  3. Paste the copied @import directly under the first @import. Like so:
  4. Save.

I can't really explain it anymore because it really is that simple.

Crimson 64

this was good, im in a lot of servers so i like having it easier to reach.


Hello is it possible to have the column shown into multiple list instead of just one ?


Not yet, but I could try figure out a way


This shuld be a plugin.

Corey Eats Socks

this would make scrolling a bit weird wouldn't it. cool concept tho.


Not really. You just scroll up and down like you normally would.


If you wish to have to server list at the bottom all you need to do is paste this

@import url("");

below the first @import inside your HorizontalServerList.theme.css file.
Like so:


For some reason, when paired with the MaterialDiscord theme, new markers are broken. Is there a way to fix this, or at least remove the new marker handling for this theme?


As it says in the description, this only works with basic themes. MaterialDiscord changes the server list too much for it to function properly


Would you make a version where the server list is at the bottom? It would be awesome


You can achieve this by pasting this at the very bottom/end inside your HorizontalServerList.theme.css
Like so:

.container-2lgZY8 {
    flex-direction: column-reverse;

It didn't change anything :(


Try this

.container-2lgZY8 {
    flex-direction: column-reverse !important;

It worked. Thanks!


META not found? The file u download is empty, wtf


Sorry about that. The download link has been updated.