ttmttko
    ttmttko

    Copyright ©︎ Takao Tatematsu. All Rights Reserved.

    X

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

    🗓 作成日
    2020/12/31
    🔖 タグ
    notion+super.so

    notionの左上に常に存在するパンくず形式のナビゲーションバーを変更する方法について解説します。

    • 通常の見た目
      • image
    • 変更後の見た目
      • image

    notionのナビゲーションバーを変更したい方におすすめです。

    なお、まもなく公式でナビゲーションバーの提供が開始されるようです。 いずれ乗り換える予定ですが、それまでは今回の方法で作ったナビゲーションバーを活用します。

    工程は以下2つです。

    1. 現行のナビゲーションバーを非表示にする
    2. 自作したナビゲーションタグを挿入する

    現行のナビゲーションバーを非表示にする

    現行のナビゲーションバーはnotion-navbarというclassで定義されています。

    image

    この記述を無効化させるために、superのSnippet injectionのstyleタグ内に、以下情報を追記して非表示化させます。

    <style>
.notion-navbar {
    display: none !important;
  }
</style>

    自作したナビゲーションタグを挿入する

    つぎに、自作したナビゲーションバーを記述していきます。今回は「top / All posts / profile」の3つのページにアクセスできるように設定しました。

    • 完成形
      • image

    CSSはこのように記述しました。

    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>

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

    image

    参考元

    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

    Navigation Bar?
    icon
    share this page

    Copyright ©︎ Takao Tatematsu. All Rights Reserved. This website is made with 🄽 Notion and ⚡️ Super

    <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>