super.soでナビゲーションバーを設置してみる

🗓 作成日

2020/12/31

🔖 タグ

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>

出来上がりはこのようになります。

参考元

Navigation Bar?

Trying to set up a navigation bar at the top of my page. How can I set one up like Traf's notion site? Is this possible? [Screen Shot 2020-11-24 at 3.25.34 PM.png]

community.super.so

share this page