Hide navigation buttons only in the title bar

I would like to hide the back/forward buttons on the title bar, without hiding the title bar altogether.

When I use the hider plugin to hide the tab bar and open a note in a new window, the navigation arrows overlaps with the macOS window control buttons.

Things I have tried

There’s a native setting to hide the title bar altogether.
There’s the hider plugin, but it does not hide the navigation button
There’s the minimalist theme, which has the focus mode, but similar to the native setting, it hides the title bar altogether.

Is there a way to achieve this?

I can probably modify the css of the theme to achieve this, but I find it annoying to have to modify it every time the theme is updated.
Perhaps there’s a CSS snippet I can insert in the appearance settings to do this?

If you install a snippet, it shouldn’t need to be updated every time the theme changes, unless there is some DOM element changes happening at the same time.

So something which worked for me is to have the following in a CSS snippets:

.is-popout-window .view-header-nav-buttons {
  padding-left: 70px; /* */
  /* display: none; /* */

As is, this will move the buttons clear of the window control buttons, so that they can still be used. If you’d rather want them gone altogether: Add /* in front of the padding-left line (or remove the entire line), and remove the /* in front of the display line.

Bonus tip: How to add a custom CSS snippet
  • Goto Settings > Appearance and scroll down to “CSS snippets” section, and hit the folder icon on the far right. This opens up a file explorer window, in the folder vault/.obsidian/snippets, which is were you want to save your css snippet
  • In this new window create a file, like myCss.css, where you copy the CSS into. Make sure this actually is a text file, and that the name ends in .css
  • Back in Obsidian, you should now see your myCss in the list of CSS snippets. If not, hit the refresh button
  • Final step is to click the enable button to the right of your file, and now your new CSS should be in effect
  • If you later on make changes in the CSS snippet file, the effect should be immediate. If not, try disabling and re-enabling the snippet, or in some strange cases, you would need to reload Obsidian. In 99% of the cases, the changes are immediate, though.
1 Like

You might want to report this as an issue on Hider’s GitHub.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.