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>