🗓 作成日
December 31, 2020
🔖 タグ
notion+super.so
notionの左上に常に存在するパンくず形式のナビゲーションバーを変更する方法について解説します。
- 通常の見た目
- 変更後の見た目
notionのナビゲーションバーを変更したい方におすすめです。
なお、まもなく公式でナビゲーションバーの提供が開始されるようです。 いずれ乗り換える予定ですが、それまでは今回の方法で作ったナビゲーションバーを活用します。
工程は以下2つです。
- 現行のナビゲーションバーを非表示にする
- 自作したナビゲーションタグを挿入する
現行のナビゲーションバーを非表示にする
現行のナビゲーションバーはnotion-navbarというclassで定義されています。
この記述を無効化させるために、superのSnippet injectionのstyleタグ内に、以下情報を追記して非表示化させます。
<style>
.notion-navbar {
display: none !important;
}
</style>自作したナビゲーションタグを挿入する
つぎに、自作したナビゲーションバーを記述していきます。今回は「top / All posts / profile」の3つのページにアクセスできるように設定しました。
- 完成形
CSSはこのように記述しました。
<style>
.nav {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(20px);
align-items: center;
padding-left: 20px;
position: fixed;
z-index: 9999;
display: flex;
height: 64px;
width: 100%;
}
.nav-link {
transition: all .3s ease-in-out;
justify-content: center;
align-items: center;
padding: 0 20px 4px;
font-size: 14px;
display: flex;
height: 100%;
color: rgb(0, 0, 0);
}
.nav-link:hover {
color: #808c99 !important;
}
</style>nav タブはこのように記述しました
<nav class="nav">
<a class="nav-link" href="/">top</a> /
<a class="nav-link" href="/posts">All posts</a> /
<a class="nav-link" href="/profile">profile</a>
</nav>出来上がりはこのようになります。
参考元
