nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Is there a way to hide the "Add a list" bar?

Aditya Gondane

Is there a way to hide the "Add a list" bar?

Accepted answers

All comments

Matthew N

Hey Aditya!

There's not a way to hide the "Add a list" bar. However, the "Add a list" and "Add a card" do not appear if a user is added to the board as an observer (for Business Class).

Curious, what would the benefit of that be?

andreigabur

I also hate that "Add a list..." button. I use the desktop app and I like to keep it open on a half of my screen, but because of that button I get the horizontal scroll bar. And since you can create new lists with a double-click on the background I do not use it anyway.

It would be great to have a switch in the settings for hiding that button. A ".js-add-list {display: none}" in the css will be enough.

Allen Angle

There is a 'Trello Clean' Chome Extension to remove the 'Add List' column, but unfortunately, it only works in the browser, does not transfer over to the Desktop App. Yes Trello, please add this as a basic feature to Trello to keep a clean board.

unknown

Yes please remove or optionally remove the "Add Another List". That's a lot of screen real estate for something I'm not going to use very often once I have my board setup.

Robin Lijkwan

As already mentioned, the benefit is to clean up unnecessary unused screen real estate.

Andrew Dassing

Yes, the Trello Clean Chrome extension works well, but you can gain more customization using a CSS injector and swimlanes. Here's my setup:

User JavaScript and CSS [1.2.8] by tenRabbits.
Swimlanes for Trello [1.7] by Jess Yaus.

Install and activate the extensions, then set up your lists and swimlanes:

Append "|swimlane-name" to the first list.
Append "|swimlane-name: to whichever lists start a new swimlane.
Add CSS to color the list backgrounds and hide the "Add a list" item.

Sample CSS for four lists per swimlane:

#board > div:nth-child(5n+1) > div { background-color: lightgrey; }
#board > div:nth-child(5n+1) > div > div.list-header.js-list-header.u-clearfix.is-menu-shown > textarea { color: black; }

#board > div:nth-child(5n+2) > div { background-color: lightblue; }
#board > div:nth-child(5n+2) > div > div.list-header.js-list-header.u-clearfix.is-menu-shown > textarea { color: black; }

#board > div:nth-child(5n+3) > div { background-color: lightgreen; }
#board > div:nth-child(5n+3) > div > div.list-header.js-list-header.u-clearfix.is-menu-shown > textarea { color: black; }

#board > div:nth-child(5n+4) > div { background-color: green; }
#board > div:nth-child(5n+4) > div > div.list-header.js-list-header.u-clearfix.is-menu-shown > textarea { color: lightgreen; }

#board > div.js-add-list.list-wrapper.mod-add.is-idle { visibility: hidden; }

NOTE: Beware the line wrapping! Every new line above starts with a hash (#) mark.

Looks like this:

Rob Horan

Sorry, did you mean the benefit of hiding, or hiding only under these circumstances?

Rob Horan

That Trello Clean extension is useless. All it did was hide the option. My screen space is still lost! Now I just have a block of empty space - why can't Trello use the maximum available space?

Paw Simonsen

I know that this is a very old issue, but it's the first one that showed up in my search.

My solution was to install the StyleBot extension in my Edge browser, then right click the element and select "Style Element", and then select to hide it under "Visibility".

Works perfectly when having installed the website as an app to the process bar on Windows 11.