Custom CSS
Copy this to your obsidian.css file and enable "Settings > Appearance > Translucent window" in Obsidian for transparent background.
body {
.notebook-navigator,
.nn-navigation-pane,
.nn-navigation-pane .nn-pane-header,
.nn-navigation-pane-scroller,
.nn-list-pane,
.nn-list-pane .nn-pane-header,
.nn-list-pane-scroller,
.nn-list-title-area,
.nn-vault-title-area,
.nn-shortcut-pinned,
.nn-navigation-calendar-overlay,
.nn-nav-banner-image {
background-color: transparent !important;
}
}
Tip from https://github.com/johansan/notebook-navigator/issues/762
module.exports = async (params) => {
const nnContainer = document.querySelector(".nn-split-container.nn-desktop");
const oSidebar = document.querySelector(".workspace-split.mod-left-split"); //obsidian left sidebar container
if (!nnContainer || !oSidebar) return;
if (nnContainer.classList.contains("nn-dual-pane") && nnContainer.classList.contains("nn-orientation-horizontal")) {
//dual panes
oSidebar.style.width = "600px";
const nnNavPanel = document.querySelector(".nn-navigation-pane");
if (nnNavPanel) nnNavPanel.style.width = "250px";
} else {
//single pane
oSidebar.style.width = "300px";
}
nnContainer.focus();
};
To show icons in list pane but not indent list entries that don't have list icons use this (thanks to Discord/rotane):
.nn-file-icon-slot:not(:has(.nn-file-icon)) { display: none; }
Thanks to @edwardhorsford here is a snippet if you do not want your top level folders to be indented.
See https://github.com/johansan/notebook-navigator/issues/557
/* Remove indentation from first level of folders */
.nn-navitem.nn-folder {
padding-inline-start: calc(max(0, var(--level, 0) - 1) * var(--nn-setting-nav-indent)) !important;
}
/* Hide chevron on root folder only and prevent single clicks collapsing item*/
.nn-navitem.nn-folder[data-level="0"] .nn-navitem-chevron {
opacity: 0 !important;
pointer-events: none !important;
}
Thanks to @greetclammy you can use the following CSS snippet to configure background differently for desktop and mobile.
See https://github.com/johansan/notebook-navigator/issues/469
body {
--nn-theme-list-bg: var(--background-secondary);
--nn-theme-list-header-bg: var(--background-secondary);
}
body.is-mobile.theme-light {
--nn-theme-mobile-nav-bg: var(--background-primary);
--nn-theme-list-bg: var(--background-primary);
--nn-theme-list-header-bg: var(--background-primary);
}
body.is-mobile.theme-dark {
--nn-theme-mobile-nav-bg: var(--background-secondary);
--nn-theme-list-bg: var(--background-secondary);
--nn-theme-list-header-bg: var(--background-secondary);
}
If you use the Obsidian Retroma theme you might want to use the following snippet to add padding to Notebook Navigator panes so the padding effect of the skin gets enough space:
.nn-split-container.nn-orientation-vertical .nn-list-pane {
margin-top: 8px !important;
}
.nn-navigation-pane .nn-pane-header,
.nn-list-pane .nn-pane-header {
margin-bottom: 8px !important;
}
Thank you to @mattsigal for the CSS snippet. See more at https://github.com/johansan/notebook-navigator/issues/470