How to Hide Notion's +New Button in Using CSS
Dave de Céspedes
I build high performance Notion workspaces for teams | Over 30 team workspaces built and counting | Certified Notion Consultant | Ex-Architect
Over the past few months, two things have been true:
- I've been using Notion in a browser (mostly because I tend to have several pages open simultaneously)
- The "+New" button is everywhere I look, and I couldn't turn it off without locking the entire page.
If you've customized your dashboard, you've surely bumped up against this button, which in many cases, breaks layouts, especially if you often use gallery views. Case in point:
I've done some light CSS and HTML work in the past, and figured there had to be a way to hide this button without locking the entire page or database. Turns out there is!
There's a few things to note before we jump in. For this particular solution, you have to use Notion in your browser – specifically those running on Chromium (ie. Chrome, Brave, Microsoft Edge). There are ways to edit the look and feel of the Notion app using tools like Notion Enhancer, but I haven't spend too much time there as of yet.
Second note: if you've already dabbled in editing the CSS of your Notion page, you do want to test this out to make sure it plays well with any other CSS you've used.
Download the User Javascript & CSS Plugin
You can head to the Chrome Web Store and search for User Javascript & CSS Plugin, or just download it here.
Once the plugin is downloaded, click on the icon in your browser menu to open the editor, which looks like this:
Once you have the plugin downloaded, there's a few details to add:
- In the header section, name the file (for example: Notion: Remove + Button). This will be helpful if you use the plugin for other websites in the future.
- Set the website (also in the header section) to notion.so.
- Add the CSS in the right column. Here's the code:
/*************************************************************/ /*remove new button from gallery view*/ .notion-gallery-view .notion-selectable.notion-collection_view-block> [role="button"] { display: none !important; } /*************************************************************************/
Once you've added the CSS, click Save, and navigate back to your Notion page. Give it a few minutes, and poof! No more +New Buttons!
Here's to hoping Notion adds this level of customization in the future. Have you done similar CSS edits to your Notion space? I'd love to hear about it!
Also, if you're interested in learning more about this Notion system, it's called Manifest OS; I designed it to be a minimalist productivity system inspired by GTD, PARA, Atomic Habits, and The 12-Week Year.
You can learn more or purchase Here!.