How to make a floating menu on your Notion page.

<nav>
    <ul class="menu">
        <li class="logo"><img src="<https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffe3eb369-fe14-4082-9cb0-e88b3bea1381%2Fnav-logo.svg?table=block&id=8825a6d0-130d-4cb3-88e4-c82e87302a60&cache=v2>" height="70px" alt="">
        </li>
        <li class="item"><a href="/">Home</a></li>
        <li class="item"><a href="/Courage-Muscle">Courage Muscle</a></li>
        <li class="item"><a href="/Storywatch">StoryWatch</a></li>
        <li class="item"><a href="/business">Business</a></li>
        <li class="item"><a href="/About">About</a></li>
        <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
    </ul>
</nav>
<style>
/* Navigation */

nav {
    background: #011019;
    box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
    padding: 0 25px;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 999 !important;
}

a {
    color: var(--bg-color);
    text-decoration: none;
}

.menu,
.submenu {
    list-style-type: none;
}

.item {
    padding: 10px;
}

.item.button {
    padding: 9px 5px;
}

.item:not(.button) a:hover,
.item a:hover::after {
    color: var(--notion-blue);
}

/* Mobile menu */

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.menu li a {
    display: block;
    padding: 15px 5px;
}

.toggle {
    order: 1;
    font-size: 20px;
}

.item.button {
    order: 2;
}

.item {
    order: 3;
    width: 100%;
    text-align: center;
    display: none;
}

.active .item {
    display: block;
}

@media all and (min-width: 700px) {
    .menu {
        justify-content: center;
    }

    .logo {
        flex: 1;
    }

    .item.button {
        width: auto;
        order: 1;
        display: block;
    }

    .toggle {
        flex: 1;
        text-align: right;
        order: 2;
    }

    /* Button up from tablet screen */

    .menu li.button a {
        padding: 10px 15px;
        margin: 5px 0;
    }

    .button a {
        background: #0080ff;
        border: 1px royalblue solid;
    }

    .button.secondary {
        border: 0;
    }

    .button.secondary a {
        background: transparent;
        border: 1px #0080ff solid;
    }

    .button a:hover {
        text-decoration: none;
    }

    .button:not(.secondary) a:hover {
        background: royalblue;
        border-color: darkblue;
    }
}

/* Desktop menu */

@media all and (min-width: 960px) {
    .menu {
        align-items: flex-start;
        flex-wrap: nowrap;
        background: none;
    }

    .logo {
        order: 0;
    }

    .item {
        order: 1;
        position: relative;
        display: block;
        width: auto;
    }

    .button {
        order: 2;
    }

    .toggle {
        display: none;
    }
}
</style>

Add this script to handle onClick events for mobile and toggle the menu. This also includes a script to import font awesome icons which are needed for the mobile menu.

<script src="<https://kit.fontawesome.com/e7472b2c13.js>"></script>
<script>

		const toggle = document.querySelector(".toggle");
		const menu = document.querySelector(".menu");
		const items = document.querySelectorAll(".item");
		
		/* Toggle mobile menu */
		function toggleMenu() {
		  if (menu.classList.contains("active")) {
		    menu.classList.remove("active");
		    toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
		  } else {
		    menu.classList.add("active");
		    toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
		  }
		}
		/* Event Listeners */
		toggle.addEventListener("click", toggleMenu, false);
		for (let item of items) {
		  if (item.querySelector(".submenu")) {
		    item.addEventListener("click", toggleItem, false);
		  }
		  item.addEventListener("keypress", toggleItem, false);
		}
		document.addEventListener("click", closeSubmenu, false);

</script>