From 497b0745942e6c8ee769651285ce11aa67f961ab Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Mon, 29 Apr 2024 18:01:46 +0800
Subject: [PATCH] Turn the nabigation menu into a hamburger menu on mobile

---
 _site/about/index.html                        |  79 ++-
 _site/archive/index.html                      |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 _site/articles/index.html                     |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../my-dislike-of-shipping-culture/index.html |  79 ++-
 _site/blog/index.html                         |  79 ++-
 _site/blog/page/2/index.html                  |  79 ++-
 _site/blog/page/3/index.html                  |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 .../index.html                                |  79 ++-
 _site/blog/posts/index.html                   |  79 ++-
 .../a-summers-end/index (conflicted).html     | 495 ++++++++++++++++++
 _site/categories/a-summers-end/index.html     |  79 ++-
 .../anti-harry-potter/index (conflicted).html | 495 ++++++++++++++++++
 _site/categories/anti-harry-potter/index.html |  79 ++-
 _site/categories/anti-jk-rowling/index.html   |  79 ++-
 _site/categories/cassette-beasts/index.html   |  79 ++-
 _site/categories/dracula-daily/index.html     |  79 ++-
 _site/categories/fandom-culture/index.html    |  79 ++-
 _site/categories/index.html                   |  79 ++-
 _site/categories/lesbian/index.html           |  79 ++-
 _site/categories/life-updates/index.html      |  79 ++-
 _site/categories/modding/index.html           |  79 ++-
 _site/categories/my-birthday/index.html       |  79 ++-
 _site/categories/my-interviews/index.html     |  79 ++-
 _site/categories/site-anniversary/index.html  |  79 ++-
 _site/categories/site-updates/index.html      |  79 ++-
 _site/categories/star-wars-kotor-2/index.html |  79 ++-
 _site/categories/star-wars-kotor/index.html   |  79 ++-
 _site/changelogs/2022/index.html              |  79 ++-
 _site/changelogs/2023/index.html              |  79 ++-
 _site/changelogs/2024/index.html              |  79 ++-
 _site/changelogs/index.html                   |  79 ++-
 _site/changelogs/layouts/index.html           |  79 ++-
 _site/changelogs/page/2/index.html            |  79 ++-
 _site/changelogs/page/3/index.html            |  79 ++-
 _site/changelogs/page/4/index.html            |  79 ++-
 _site/changelogs/page/5/index.html            |  79 ++-
 _site/feed.xml                                |   2 +-
 _site/index.html                              |  79 ++-
 _site/links/index.html                        |  79 ++-
 _site/now/index.html                          |  79 ++-
 _site/projects/index.html                     |  79 ++-
 _site/projects/kotor1mods/index.html          |  79 ++-
 _site/projects/kotor2mods/index.html          |  79 ++-
 _site/projects/playlists/index.html           |  79 ++-
 _site/shrines/asummersend/gallery/index.html  |  79 ++-
 _site/shrines/asummersend/index.html          |  79 ++-
 .../shrines/asummersend/playlists/index.html  |  79 ++-
 _site/shrines/asummersend/trivia/index.html   |  79 ++-
 .../index.html                                |  79 ++-
 .../cassettebeasts/articles/index.html        |  79 ++-
 .../cassettebeasts/featured/index.html        |  79 ++-
 .../shrines/cassettebeasts/gamelog/index.html |  79 ++-
 _site/shrines/cassettebeasts/index.html       |  79 ++-
 .../cassettebeasts/resources/index.html       |  79 ++-
 .../shrines/cassettebeasts/trivia/index.html  |  79 ++-
 _site/shrines/index.html                      |  79 ++-
 .../arren-kae-kreia-theory/index.html         |  79 ++-
 .../faq-same-gender-romance-mods/index.html   |  79 ++-
 .../handmaiden-sisters-mother/index.html      |  79 ++-
 .../shrines/starwarskotor/articles/index.html |  79 ++-
 .../index.html                                |  79 ++-
 .../juhani-lesbian-evidence/index.html        |  79 ++-
 .../articles/keep-juhani-a-lesbian/index.html |  79 ++-
 .../partyswap-management-takeover/index.html  |  79 ++-
 .../index.html                                |  79 ++-
 _site/shrines/starwarskotor/guides/index.html |  79 ++-
 .../kotor-juhani-romance-guide/index.html     |  79 ++-
 .../kotor-redeeming-bastila-guide/index.html  |  79 ++-
 .../index.html                                |  79 ++-
 _site/shrines/starwarskotor/index.html        |  79 ++-
 .../starwarskotor/resources/index.html        |  79 ++-
 .../kotor-same-gender-romance-mods/index.html |  79 ++-
 .../index.html                                |  79 ++-
 .../tslrcm-m478ep-modules-music/index.html    |  79 ++-
 .../starwarskotor/universes/index.html        |  79 ++-
 _site/sitemap/index.html                      |  79 ++-
 src/_includes/global/navbar.njk               |  79 ++-
 93 files changed, 7381 insertions(+), 721 deletions(-)
 create mode 100644 _site/categories/a-summers-end/index (conflicted).html
 create mode 100644 _site/categories/anti-harry-potter/index (conflicted).html

diff --git a/_site/about/index.html b/_site/about/index.html
index 091cd650..d646763f 100644
--- a/_site/about/index.html
+++ b/_site/about/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/archive/index.html b/_site/archive/index.html
index 57bb3c5b..fcdc31be 100644
--- a/_site/archive/index.html
+++ b/_site/archive/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/articles/anti-harry-potter-jk-rowling-masterlist/index.html b/_site/articles/anti-harry-potter-jk-rowling-masterlist/index.html
index 931bdf6b..26de9503 100644
--- a/_site/articles/anti-harry-potter-jk-rowling-masterlist/index.html
+++ b/_site/articles/anti-harry-potter-jk-rowling-masterlist/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/articles/designated-lesbian-syndrome-fandom/index.html b/_site/articles/designated-lesbian-syndrome-fandom/index.html
index 4b7217df..82a3bd1b 100644
--- a/_site/articles/designated-lesbian-syndrome-fandom/index.html
+++ b/_site/articles/designated-lesbian-syndrome-fandom/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/articles/index.html b/_site/articles/index.html
index 10343e16..98d82c53 100644
--- a/_site/articles/index.html
+++ b/_site/articles/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/articles/kotor2-modder-interview-ars-technica/index.html b/_site/articles/kotor2-modder-interview-ars-technica/index.html
index 71dc5fca..3593dc30 100644
--- a/_site/articles/kotor2-modder-interview-ars-technica/index.html
+++ b/_site/articles/kotor2-modder-interview-ars-technica/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/articles/lgbtq-booklet-interview-misi-bawang/index.html b/_site/articles/lgbtq-booklet-interview-misi-bawang/index.html
index ab216c15..119c73a0 100644
--- a/_site/articles/lgbtq-booklet-interview-misi-bawang/index.html
+++ b/_site/articles/lgbtq-booklet-interview-misi-bawang/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/articles/my-dislike-of-shipping-culture/index.html b/_site/articles/my-dislike-of-shipping-culture/index.html
index 3cfff179..309ea995 100644
--- a/_site/articles/my-dislike-of-shipping-culture/index.html
+++ b/_site/articles/my-dislike-of-shipping-culture/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/index.html b/_site/blog/index.html
index 36ab36f9..2819c4a8 100644
--- a/_site/blog/index.html
+++ b/_site/blog/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/page/2/index.html b/_site/blog/page/2/index.html
index e8e14d52..a85cfbae 100644
--- a/_site/blog/page/2/index.html
+++ b/_site/blog/page/2/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/page/3/index.html b/_site/blog/page/3/index.html
index 92afeb5a..56bf281a 100644
--- a/_site/blog/page/3/index.html
+++ b/_site/blog/page/3/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/index.html b/_site/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/index.html
index 133930cc..8fd3a9f8 100644
--- a/_site/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/index.html
+++ b/_site/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/index.html b/_site/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/index.html
index 7e9a0a34..816739e3 100644
--- a/_site/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/index.html
+++ b/_site/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/index.html b/_site/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/index.html
index 2f793cc3..4a902c33 100644
--- a/_site/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/index.html
+++ b/_site/blog/posts/2023-05-09-onboard-the-dracula-daily-hype-train/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/index.html b/_site/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/index.html
index a9fa3879..8e06ab00 100644
--- a/_site/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/index.html
+++ b/_site/blog/posts/2023-06-23-june-2023-leilukins-hub-layout-rewrite/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/index.html b/_site/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/index.html
index 3d0109e5..da9fc50a 100644
--- a/_site/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/index.html
+++ b/_site/blog/posts/2023-07-28-my-first-birthday-after-the-launch-of-leilukins-hub/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/index.html b/_site/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/index.html
index 54cf1bb4..b47f3e6a 100644
--- a/_site/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/index.html
+++ b/_site/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/index.html b/_site/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/index.html
index 1a1506e7..223d9e11 100644
--- a/_site/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/index.html
+++ b/_site/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/index.html b/_site/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/index.html
index f84310bf..b253676f 100644
--- a/_site/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/index.html
+++ b/_site/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/index.html b/_site/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/index.html
index 6bcd86a6..d468bbd8 100644
--- a/_site/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/index.html
+++ b/_site/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/index.html b/_site/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/index.html
index cbc5e258..e35e499b 100644
--- a/_site/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/index.html
+++ b/_site/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/index.html b/_site/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/index.html
index b5deb07d..8aec8b00 100644
--- a/_site/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/index.html
+++ b/_site/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/index.html b/_site/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/index.html
index 3c7c0b1e..28a543ad 100644
--- a/_site/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/index.html
+++ b/_site/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/index.html b/_site/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/index.html
index 7b57c7d1..7404f33b 100644
--- a/_site/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/index.html
+++ b/_site/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/blog/posts/index.html b/_site/blog/posts/index.html
index 73ea7c2e..5c675a9e 100644
--- a/_site/blog/posts/index.html
+++ b/_site/blog/posts/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/a-summers-end/index (conflicted).html b/_site/categories/a-summers-end/index (conflicted).html
new file mode 100644
index 00000000..5cb895a9
--- /dev/null
+++ b/_site/categories/a-summers-end/index (conflicted).html	
@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" id="page-top">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        
+        
+            <meta property="og:title" content="Content Category: &quot;a summers end&quot;">
+        
+        <meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="All contents under the "a summers end" category on Leilukin's Hub.">
+<meta name="generator" content="Eleventy v2.0.1">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://leilukin.neocities.org/categories/a-summers-end/">
+<meta property="og:site_name" content="Leilukin's Hub">
+<meta property="og:locale" content="en_MY">
+<meta property="og:description" content="All contents under the "a summers end" category on Leilukin's Hub.">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:url" content="https://leilukin.neocities.org/categories/a-summers-end/">
+<meta name="twitter:description" content="All contents under the "a summers end" category on Leilukin's Hub.">
+<link rel="canonical" href="https://leilukin.neocities.org/categories/a-summers-end/">
+
+
+        
+        <link rel="stylesheet" href="/assets/css/main.css">
+        
+
+        
+        <link rel="stylesheet" href="/assets/fonts/noto-sans/noto-sans.css">
+
+        
+        <link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
+        <link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
+        <link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
+
+        
+        
+            <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
+            <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
+            <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
+            <link rel="manifest" href="/assets/favicon/site.webmanifest">
+        
+
+        <title>
+            Content Category: &quot;a summers end&quot; | Leilukin's Hub
+        </title>
+    </head>
+    <body>
+        <header class="hero">
+    <div class="hero__top-bar hidden"></div>
+    <div class="hero__img">
+        
+    <img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
+
+    </div>
+</header>
+
+<style>
+    .hero {
+        width: 100%;
+        background-color: var(--clr-hero-bg);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .hero__top-bar {
+        background-color: var(--clr-navbar-bg);
+        width: 100%;
+        padding: 0.5em 0.7em;
+    }
+
+    .hero__img {
+        display: grid;
+        place-content: center;
+    }
+
+    .hero img {
+        object-fit: contain;
+        overflow: hidden;
+        max-height: 16rem;
+        
+    filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
+
+    }
+</style>
+
+<script defer>
+    const hero = document.querySelector(".hero");
+    const heroTopBarEl = document.querySelector(".hero__top-bar");
+    const headerImgEl = document.querySelector(".hero__img");
+
+    
+    const todayEvent = getTodayEvent();
+
+    if (todayEvent) {
+        heroTopBarEl.classList.remove('hidden');
+        heroTopBarEl.innerHTML = todayEvent.blurb;
+
+        if (todayEvent.class) {
+            headerImgEl.classList.add(todayEvent.class);
+        }
+    }
+
+    function getTodayEvent() {
+        const date = new Date();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        const year = date.getFullYear();
+        const weekOfMonth = Math.ceil(day / 7);
+
+        const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
+        const siteAnniversary = year - leilukinsHubLaunchDate;
+
+        if (month === 3 && day === 1)
+            return {
+                blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day" target="_blank">Zero Discrimination Day</a>`,
+                class: "flag-progress-intersex",
+            };
+        else if (month === 3 && day === 8)
+            return {
+                blurb: `Today is <a href="https://www.internationalwomensday.com/" target="_blank">International Women's Day}</a>`,
+                class: "symbol-venus",
+            };
+        else if (month === 3 && day === 31)
+            return {
+                blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html" target="_blank">Trans Day of Visibility</a>`,
+                class: "flag-trans",
+            };
+        else if (month === 4 && day === 6)
+            return {
+                blurb: `Today is <a href="https://internationalasexualityday.org/en" target="_blank">International Asexuality Day</a>`,
+                class: "flag-ace",
+            };
+        else if (month === 4 && day === 26)
+            return {
+                blurb: `Today is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Day</a>`,
+                class: "flag-lesbian",
+            };
+        else if (month === 4 && weekOfMonth === 4)
+            return {
+                blurb: `This week is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Week</a>`,
+                class: "flag-lesbian",
+            };
+        else if (month === 5 && day === 17)
+            return {
+                blurb: `Today is <a href="https://may17.org" target="_blank">International Day Against Homophobia, Biphobia and Transphobia</a>`,
+                class: "flag-progress",
+            };
+        else if (month === 5 && day === 19)
+            return {
+                blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/" target="_blank">Agender Pride Day</a>`,
+                class: "flag-agender",
+            };
+        else if (month === 5 && day === 25)
+            return {
+                blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday" target="_blank">Pansexual and Panromantic Awareness and Visibility Day</a>`,
+                class: "flag-pan",
+            };
+        else if (month === 6)
+            return {
+                blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/" target="_blank">Pride Month</a>!`,
+                class: "flag-progress-intersex",
+            };
+        else if (month === 7 && day === 14)
+            return {
+                blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html" target="_blank">Non-Binary People's Day</a>`,
+                class: "flag-non-binary",
+            };
+        else if (month === 7 && day === 28)
+            return {
+                blurb: `Today is Leilukin's Birthday`
+            };
+        else if (month === 8 && day === 25)
+            return {
+                blurb: `Today is <a href="https://aromanticspectrumday.net/" target="_blank">Aromantic Spectrum Visibility Day</a>`,
+                class: "flag-aro",
+            };
+        else if (month === 9 && day === 11)
+            return {
+                blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin&#39;s Hub`
+            };
+        else if (month === 9 && day === 23)
+            return {
+                blurb: `Today is <a href="https://bivisibilityday.com/about" target="_blank">Bi Visibility Day</a>`,
+                class: "flag-bi",
+            };
+        else if (month === 10 && day === 8)
+            return {
+                blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2" target="_blank">International Lesbian Day</a>`,
+                class: "flag-lesbian",
+            };
+        else if (month === 10 && day === 11)
+            return {
+                blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day" target="_blank">National Coming Out Day</a>`,
+                class: "flag-rainbow",
+            };
+        else if (month === 10 && day === 17)
+            return {
+                blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week" target="_blank">Genderfluid Visibility Week</a>`,
+                class: "flag-genderfluid",
+            };
+        else if (month === 10 && day === 24)
+            return {
+                blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week" target="_blank">Ace Week</a>`,
+                class: "flag-ace",
+            };
+        else if (month === 10 && day === 26)
+            return {
+                blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day" target="_blank">Intersex Awareness Day</a>`,
+                class: "flag-intersex",
+            };
+        else if (month === 11 && day === 13)
+            return {
+                blurb: `Today is the start of <a href="https://glaad.org/transweek/" target="_blank">Transgender Awareness Week</a>`,
+                class: "flag-trans",
+            };
+        else
+            return null;
+    }
+
+</script>
+        <nav class="navbar">
+    <div class="navbar__header">
+        <button>
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="nav__links">
+        
+    
+    
+        <li>
+            <a  href="/">Home</a>
+        </li>
+        <li>
+            <a  href="/about/">About</a>
+        </li>
+        <li>
+            <a  href="/now/">Now</a>
+        </li>
+        <li>
+            <a  href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a  href="/articles/">Articles</a>
+        </li>
+        <li>
+            <a  href="/projects/">Projects</a>
+        </li>
+        <li>
+            <a  href="/shrines/">Shrines</a>
+        </li>
+        <li>
+            <a  href="/links/">Links</a>
+        </li>
+    <li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
+
+    </ul>
+</nav>
+
+<style>
+    .navbar {
+        background: var(--clr-navbar-bg);
+        padding: 0 0.6rem;
+        width: 100%;
+        z-index: 999;
+        position: sticky;
+        top: 0;
+    }
+
+    .navbar__header {
+        display: flex;
+        gap: 0.5em;
+    }
+
+    .mavbar__title {
+        font-size: 1.5rem;
+    }
+
+    .navbar a {
+        color: var(--clr-navbar-link);
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    .navbar a:hover {
+        color: var(--clr-link-hover);
+    }
+
+    .navbar a:focus {
+        outline-offset: 0.3em;
+        outline: 0.15em solid var(--clr-navbar-link);
+    }
+
+    .nav__links {
+        list-style: none;
+        padding: 0;
+        display: flex;
+        justify-content: space-evenly;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {}
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
+</style>
+
+        <main>
+            <header class="main__header">
+    
+
+    
+        <h1>Content Category: &quot;a summers end&quot;</h1>
+        
+            <p>All contents under the &quot;a summers end&quot; category on Leilukin&#39;s Hub.</p>
+        
+    
+</header>
+
+<div class="content__wrapper">
+    
+
+    
+		<div class="content ">
+			
+
+<h2>1 Contents Filed Under "a summers end"</h2>
+
+
+<ul class="content-list">
+    
+        <li>
+            <p class="content-list__title">
+                <a href="/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/">
+                    Support for My Steam Review of A Summer&#39;s End — Hong Kong 1986 | Blog
+                    
+                </a>
+            </p>
+            <time>30 October 2023</time>
+        </li>
+    
+</ul>
+
+<style>
+    .content-list {
+        display: grid;
+        gap: 1em;
+        padding-left: 1em;
+    }
+
+    .content-list__title {
+        font-size: clamp(1.55rem, 1rem + 3vw, 1.2rem);
+        line-height: 1.3;
+        margin-bottom: 0.2em;
+    }
+</style>
+
+
+<p>See <a href="/categories/">all content categories</a>.</p>
+		</div>
+    
+
+    
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0 0 0.7em 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
+        <footer class="footer">
+    <p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
+
+    
+    <ul class="footer__links">
+        <li><a
+            
+            href="/sitemap/
+        ">Site Map</a></li>
+        <li><a
+            
+            href="/changelogs/"
+        >Changelogs</a></li>
+        <li><a href="/feed.xml">RSS</a></li>
+    </ul>
+
+</footer>
+
+<style>
+    .footer {
+        margin-top: auto;
+        background: var(--clr-main-footer-bg);
+        padding: 0.8rem;
+        text-align: center;
+        display: grid;
+    }
+
+    .footer p {
+        padding: 0;
+    }
+
+    .footer__links {
+        justify-self: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        gap: 0.7em;
+    }
+
+    .footer__links li:not(:last-child)::after {
+        content: '|';
+        padding-left: 0.6em;
+    }
+
+    @media only screen and (min-width: 600px) {
+        .footer {
+            width: 100%;
+        }
+    }
+</style>
+        <button class="top-btn hidden" aria-label="Scroll to top">
+    <i class="fa-solid fa-chevron-up"></i>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/_site/categories/a-summers-end/index.html b/_site/categories/a-summers-end/index.html
index 2539b653..de47db50 100644
--- a/_site/categories/a-summers-end/index.html
+++ b/_site/categories/a-summers-end/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/anti-harry-potter/index (conflicted).html b/_site/categories/anti-harry-potter/index (conflicted).html
new file mode 100644
index 00000000..29ff4698
--- /dev/null
+++ b/_site/categories/anti-harry-potter/index (conflicted).html	
@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" id="page-top">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        
+        
+            <meta property="og:title" content="Content Category: &quot;anti harry potter&quot;">
+        
+        <meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="All contents under the "anti harry potter" category on Leilukin's Hub.">
+<meta name="generator" content="Eleventy v2.0.1">
+<meta property="og:type" content="website">
+<meta property="og:url" content="https://leilukin.neocities.org/categories/anti-harry-potter/">
+<meta property="og:site_name" content="Leilukin's Hub">
+<meta property="og:locale" content="en_MY">
+<meta property="og:description" content="All contents under the "anti harry potter" category on Leilukin's Hub.">
+<meta name="twitter:card" content="summary">
+<meta name="twitter:url" content="https://leilukin.neocities.org/categories/anti-harry-potter/">
+<meta name="twitter:description" content="All contents under the "anti harry potter" category on Leilukin's Hub.">
+<link rel="canonical" href="https://leilukin.neocities.org/categories/anti-harry-potter/">
+
+
+        
+        <link rel="stylesheet" href="/assets/css/main.css">
+        
+
+        
+        <link rel="stylesheet" href="/assets/fonts/noto-sans/noto-sans.css">
+
+        
+        <link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
+        <link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
+        <link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
+
+        
+        
+            <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
+            <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
+            <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
+            <link rel="manifest" href="/assets/favicon/site.webmanifest">
+        
+
+        <title>
+            Content Category: &quot;anti harry potter&quot; | Leilukin's Hub
+        </title>
+    </head>
+    <body>
+        <header class="hero">
+    <div class="hero__top-bar hidden"></div>
+    <div class="hero__img">
+        
+    <img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
+
+    </div>
+</header>
+
+<style>
+    .hero {
+        width: 100%;
+        background-color: var(--clr-hero-bg);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+    }
+
+    .hero__top-bar {
+        background-color: var(--clr-navbar-bg);
+        width: 100%;
+        padding: 0.5em 0.7em;
+    }
+
+    .hero__img {
+        display: grid;
+        place-content: center;
+    }
+
+    .hero img {
+        object-fit: contain;
+        overflow: hidden;
+        max-height: 16rem;
+        
+    filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
+
+    }
+</style>
+
+<script defer>
+    const hero = document.querySelector(".hero");
+    const heroTopBarEl = document.querySelector(".hero__top-bar");
+    const headerImgEl = document.querySelector(".hero__img");
+
+    
+    const todayEvent = getTodayEvent();
+
+    if (todayEvent) {
+        heroTopBarEl.classList.remove('hidden');
+        heroTopBarEl.innerHTML = todayEvent.blurb;
+
+        if (todayEvent.class) {
+            headerImgEl.classList.add(todayEvent.class);
+        }
+    }
+
+    function getTodayEvent() {
+        const date = new Date();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        const year = date.getFullYear();
+        const weekOfMonth = Math.ceil(day / 7);
+
+        const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
+        const siteAnniversary = year - leilukinsHubLaunchDate;
+
+        if (month === 3 && day === 1)
+            return {
+                blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day" target="_blank">Zero Discrimination Day</a>`,
+                class: "flag-progress-intersex",
+            };
+        else if (month === 3 && day === 8)
+            return {
+                blurb: `Today is <a href="https://www.internationalwomensday.com/" target="_blank">International Women's Day}</a>`,
+                class: "symbol-venus",
+            };
+        else if (month === 3 && day === 31)
+            return {
+                blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html" target="_blank">Trans Day of Visibility</a>`,
+                class: "flag-trans",
+            };
+        else if (month === 4 && day === 6)
+            return {
+                blurb: `Today is <a href="https://internationalasexualityday.org/en" target="_blank">International Asexuality Day</a>`,
+                class: "flag-ace",
+            };
+        else if (month === 4 && day === 26)
+            return {
+                blurb: `Today is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Day</a>`,
+                class: "flag-lesbian",
+            };
+        else if (month === 4 && weekOfMonth === 4)
+            return {
+                blurb: `This week is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Week</a>`,
+                class: "flag-lesbian",
+            };
+        else if (month === 5 && day === 17)
+            return {
+                blurb: `Today is <a href="https://may17.org" target="_blank">International Day Against Homophobia, Biphobia and Transphobia</a>`,
+                class: "flag-progress",
+            };
+        else if (month === 5 && day === 19)
+            return {
+                blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/" target="_blank">Agender Pride Day</a>`,
+                class: "flag-agender",
+            };
+        else if (month === 5 && day === 25)
+            return {
+                blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday" target="_blank">Pansexual and Panromantic Awareness and Visibility Day</a>`,
+                class: "flag-pan",
+            };
+        else if (month === 6)
+            return {
+                blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/" target="_blank">Pride Month</a>!`,
+                class: "flag-progress-intersex",
+            };
+        else if (month === 7 && day === 14)
+            return {
+                blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html" target="_blank">Non-Binary People's Day</a>`,
+                class: "flag-non-binary",
+            };
+        else if (month === 7 && day === 28)
+            return {
+                blurb: `Today is Leilukin's Birthday`
+            };
+        else if (month === 8 && day === 25)
+            return {
+                blurb: `Today is <a href="https://aromanticspectrumday.net/" target="_blank">Aromantic Spectrum Visibility Day</a>`,
+                class: "flag-aro",
+            };
+        else if (month === 9 && day === 11)
+            return {
+                blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin&#39;s Hub`
+            };
+        else if (month === 9 && day === 23)
+            return {
+                blurb: `Today is <a href="https://bivisibilityday.com/about" target="_blank">Bi Visibility Day</a>`,
+                class: "flag-bi",
+            };
+        else if (month === 10 && day === 8)
+            return {
+                blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2" target="_blank">International Lesbian Day</a>`,
+                class: "flag-lesbian",
+            };
+        else if (month === 10 && day === 11)
+            return {
+                blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day" target="_blank">National Coming Out Day</a>`,
+                class: "flag-rainbow",
+            };
+        else if (month === 10 && day === 17)
+            return {
+                blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week" target="_blank">Genderfluid Visibility Week</a>`,
+                class: "flag-genderfluid",
+            };
+        else if (month === 10 && day === 24)
+            return {
+                blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week" target="_blank">Ace Week</a>`,
+                class: "flag-ace",
+            };
+        else if (month === 10 && day === 26)
+            return {
+                blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day" target="_blank">Intersex Awareness Day</a>`,
+                class: "flag-intersex",
+            };
+        else if (month === 11 && day === 13)
+            return {
+                blurb: `Today is the start of <a href="https://glaad.org/transweek/" target="_blank">Transgender Awareness Week</a>`,
+                class: "flag-trans",
+            };
+        else
+            return null;
+    }
+
+</script>
+        <nav class="navbar">
+    <div class="navbar__header">
+        <button>
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="nav__links">
+        
+    
+    
+        <li>
+            <a  href="/">Home</a>
+        </li>
+        <li>
+            <a  href="/about/">About</a>
+        </li>
+        <li>
+            <a  href="/now/">Now</a>
+        </li>
+        <li>
+            <a  href="/blog/">Blog</a>
+        </li>
+        <li>
+            <a  href="/articles/">Articles</a>
+        </li>
+        <li>
+            <a  href="/projects/">Projects</a>
+        </li>
+        <li>
+            <a  href="/shrines/">Shrines</a>
+        </li>
+        <li>
+            <a  href="/links/">Links</a>
+        </li>
+    <li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
+
+    </ul>
+</nav>
+
+<style>
+    .navbar {
+        background: var(--clr-navbar-bg);
+        padding: 0 0.6rem;
+        width: 100%;
+        z-index: 999;
+        position: sticky;
+        top: 0;
+    }
+
+    .navbar__header {
+        display: flex;
+        gap: 0.5em;
+    }
+
+    .mavbar__title {
+        font-size: 1.5rem;
+    }
+
+    .navbar a {
+        color: var(--clr-navbar-link);
+        text-decoration: none;
+        cursor: pointer;
+    }
+
+    .navbar a:hover {
+        color: var(--clr-link-hover);
+    }
+
+    .navbar a:focus {
+        outline-offset: 0.3em;
+        outline: 0.15em solid var(--clr-navbar-link);
+    }
+
+    .nav__links {
+        list-style: none;
+        padding: 0;
+        display: flex;
+        justify-content: space-evenly;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {}
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
+</style>
+
+        <main>
+            <header class="main__header">
+    
+
+    
+        <h1>Content Category: &quot;anti harry potter&quot;</h1>
+        
+            <p>All contents under the &quot;anti harry potter&quot; category on Leilukin&#39;s Hub.</p>
+        
+    
+</header>
+
+<div class="content__wrapper">
+    
+
+    
+		<div class="content ">
+			
+
+<h2>1 Contents Filed Under "anti harry potter"</h2>
+
+
+<ul class="content-list">
+    
+        <li>
+            <p class="content-list__title">
+                <a href="/articles/anti-harry-potter-jk-rowling-masterlist/">
+                    Anti-Harry Potter and Anti-J. K. Rowling Masterlist | Articles
+                    
+                </a>
+            </p>
+            <time>19 March 2023</time>
+        </li>
+    
+</ul>
+
+<style>
+    .content-list {
+        display: grid;
+        gap: 1em;
+        padding-left: 1em;
+    }
+
+    .content-list__title {
+        font-size: clamp(1.55rem, 1rem + 3vw, 1.2rem);
+        line-height: 1.3;
+        margin-bottom: 0.2em;
+    }
+</style>
+
+
+<p>See <a href="/categories/">all content categories</a>.</p>
+		</div>
+    
+
+    
+
+    
+</div>
+
+<style>
+    .breadcrumbs {
+        list-style: none;
+        padding: 0;
+        margin: 0 0 0.7em 0;
+        display: flex;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .breadcrumbs li::after {
+        content: '➔';
+        padding-left: 0.3em;
+    }
+</style>
+        </main>
+        <footer class="footer">
+    <p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
+
+    
+    <ul class="footer__links">
+        <li><a
+            
+            href="/sitemap/
+        ">Site Map</a></li>
+        <li><a
+            
+            href="/changelogs/"
+        >Changelogs</a></li>
+        <li><a href="/feed.xml">RSS</a></li>
+    </ul>
+
+</footer>
+
+<style>
+    .footer {
+        margin-top: auto;
+        background: var(--clr-main-footer-bg);
+        padding: 0.8rem;
+        text-align: center;
+        display: grid;
+    }
+
+    .footer p {
+        padding: 0;
+    }
+
+    .footer__links {
+        justify-self: center;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        gap: 0.7em;
+    }
+
+    .footer__links li:not(:last-child)::after {
+        content: '|';
+        padding-left: 0.6em;
+    }
+
+    @media only screen and (min-width: 600px) {
+        .footer {
+            width: 100%;
+        }
+    }
+</style>
+        <button class="top-btn hidden" aria-label="Scroll to top">
+    <i class="fa-solid fa-chevron-up"></i>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/_site/categories/anti-harry-potter/index.html b/_site/categories/anti-harry-potter/index.html
index 990e145a..fead9573 100644
--- a/_site/categories/anti-harry-potter/index.html
+++ b/_site/categories/anti-harry-potter/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/anti-jk-rowling/index.html b/_site/categories/anti-jk-rowling/index.html
index 9c4de2cd..e2dbe143 100644
--- a/_site/categories/anti-jk-rowling/index.html
+++ b/_site/categories/anti-jk-rowling/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/cassette-beasts/index.html b/_site/categories/cassette-beasts/index.html
index 56e0d03f..a4a1518a 100644
--- a/_site/categories/cassette-beasts/index.html
+++ b/_site/categories/cassette-beasts/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/dracula-daily/index.html b/_site/categories/dracula-daily/index.html
index 004c5bc8..c8e41d25 100644
--- a/_site/categories/dracula-daily/index.html
+++ b/_site/categories/dracula-daily/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/fandom-culture/index.html b/_site/categories/fandom-culture/index.html
index df9f7c7b..bdf31107 100644
--- a/_site/categories/fandom-culture/index.html
+++ b/_site/categories/fandom-culture/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/index.html b/_site/categories/index.html
index 43226432..f861973e 100644
--- a/_site/categories/index.html
+++ b/_site/categories/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/lesbian/index.html b/_site/categories/lesbian/index.html
index 320510c3..9bc10bfc 100644
--- a/_site/categories/lesbian/index.html
+++ b/_site/categories/lesbian/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/life-updates/index.html b/_site/categories/life-updates/index.html
index 0c2b9275..76ad5a7c 100644
--- a/_site/categories/life-updates/index.html
+++ b/_site/categories/life-updates/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/modding/index.html b/_site/categories/modding/index.html
index f1593fd8..81327fe6 100644
--- a/_site/categories/modding/index.html
+++ b/_site/categories/modding/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/my-birthday/index.html b/_site/categories/my-birthday/index.html
index c0d1233c..e606f409 100644
--- a/_site/categories/my-birthday/index.html
+++ b/_site/categories/my-birthday/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/my-interviews/index.html b/_site/categories/my-interviews/index.html
index 0e9d3b30..44eb6c65 100644
--- a/_site/categories/my-interviews/index.html
+++ b/_site/categories/my-interviews/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/site-anniversary/index.html b/_site/categories/site-anniversary/index.html
index 3898093f..a898afe7 100644
--- a/_site/categories/site-anniversary/index.html
+++ b/_site/categories/site-anniversary/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/site-updates/index.html b/_site/categories/site-updates/index.html
index 79518674..e82d5999 100644
--- a/_site/categories/site-updates/index.html
+++ b/_site/categories/site-updates/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/star-wars-kotor-2/index.html b/_site/categories/star-wars-kotor-2/index.html
index 79994b1b..eb8da95a 100644
--- a/_site/categories/star-wars-kotor-2/index.html
+++ b/_site/categories/star-wars-kotor-2/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/categories/star-wars-kotor/index.html b/_site/categories/star-wars-kotor/index.html
index 938c5d1e..2678f2e7 100644
--- a/_site/categories/star-wars-kotor/index.html
+++ b/_site/categories/star-wars-kotor/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/changelogs/2022/index.html b/_site/changelogs/2022/index.html
index 8da7e612..a3822246 100644
--- a/_site/changelogs/2022/index.html
+++ b/_site/changelogs/2022/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/changelogs/2023/index.html b/_site/changelogs/2023/index.html
index 30410604..79d2df16 100644
--- a/_site/changelogs/2023/index.html
+++ b/_site/changelogs/2023/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/changelogs/2024/index.html b/_site/changelogs/2024/index.html
index e910c036..a12af154 100644
--- a/_site/changelogs/2024/index.html
+++ b/_site/changelogs/2024/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/changelogs/index.html b/_site/changelogs/index.html
index 5c55cf68..a139b307 100644
--- a/_site/changelogs/index.html
+++ b/_site/changelogs/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/changelogs/layouts/index.html b/_site/changelogs/layouts/index.html
index 48234604..a25b3a8d 100644
--- a/_site/changelogs/layouts/index.html
+++ b/_site/changelogs/layouts/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/changelogs/page/2/index.html b/_site/changelogs/page/2/index.html
index 2de16398..70d4459c 100644
--- a/_site/changelogs/page/2/index.html
+++ b/_site/changelogs/page/2/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/changelogs/page/3/index.html b/_site/changelogs/page/3/index.html
index 80d7bfde..d3aa4995 100644
--- a/_site/changelogs/page/3/index.html
+++ b/_site/changelogs/page/3/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/changelogs/page/4/index.html b/_site/changelogs/page/4/index.html
index 4e16d41c..63970521 100644
--- a/_site/changelogs/page/4/index.html
+++ b/_site/changelogs/page/4/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/changelogs/page/5/index.html b/_site/changelogs/page/5/index.html
index 85fa000f..4528dba4 100644
--- a/_site/changelogs/page/5/index.html
+++ b/_site/changelogs/page/5/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/feed.xml b/_site/feed.xml
index e314ed0c..a58d7ef8 100644
--- a/_site/feed.xml
+++ b/_site/feed.xml
@@ -4,7 +4,7 @@
     <subtitle>Leilukin&#39;s personal website.</subtitle>
     <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
     <link href="https://leilukin.neocities.org"/>
-    <updated>2024-04-29T08:53:13Z</updated>
+    <updated>2024-04-29T10:00:39Z</updated>
     <id>https://leilukin.neocities.org</id>
     <author>
         <name>Leilukin</name>
diff --git a/_site/index.html b/_site/index.html
index 2b59ac19..5927f7ac 100644
--- a/_site/index.html
+++ b/_site/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/links/index.html b/_site/links/index.html
index c6d1f687..04c48be7 100644
--- a/_site/links/index.html
+++ b/_site/links/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/now/index.html b/_site/now/index.html
index 070588ee..ee1a0ba0 100644
--- a/_site/now/index.html
+++ b/_site/now/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/projects/index.html b/_site/projects/index.html
index d93ecc24..db4ca0cc 100644
--- a/_site/projects/index.html
+++ b/_site/projects/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/projects/kotor1mods/index.html b/_site/projects/kotor1mods/index.html
index c3fc21d5..3c3de375 100644
--- a/_site/projects/kotor1mods/index.html
+++ b/_site/projects/kotor1mods/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/projects/kotor2mods/index.html b/_site/projects/kotor2mods/index.html
index 7356be71..cb77d00f 100644
--- a/_site/projects/kotor2mods/index.html
+++ b/_site/projects/kotor2mods/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/projects/playlists/index.html b/_site/projects/playlists/index.html
index dd97d823..80515d9e 100644
--- a/_site/projects/playlists/index.html
+++ b/_site/projects/playlists/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/asummersend/gallery/index.html b/_site/shrines/asummersend/gallery/index.html
index 526c2ae3..b0081cea 100644
--- a/_site/shrines/asummersend/gallery/index.html
+++ b/_site/shrines/asummersend/gallery/index.html
@@ -139,7 +139,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -165,13 +171,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -187,16 +213,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/asummersend/index.html b/_site/shrines/asummersend/index.html
index a0ec094c..b6fe54cc 100644
--- a/_site/shrines/asummersend/index.html
+++ b/_site/shrines/asummersend/index.html
@@ -139,7 +139,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -165,13 +171,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -187,16 +213,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/asummersend/playlists/index.html b/_site/shrines/asummersend/playlists/index.html
index ee5ae19c..127ffec1 100644
--- a/_site/shrines/asummersend/playlists/index.html
+++ b/_site/shrines/asummersend/playlists/index.html
@@ -139,7 +139,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -165,13 +171,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -187,16 +213,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/asummersend/trivia/index.html b/_site/shrines/asummersend/trivia/index.html
index 6f8ccc49..d76c20e1 100644
--- a/_site/shrines/asummersend/trivia/index.html
+++ b/_site/shrines/asummersend/trivia/index.html
@@ -139,7 +139,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -165,13 +171,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -187,16 +213,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/cassettebeasts/articles/cassette-beasts-more-than-a-pokemon-clone/index.html b/_site/shrines/cassettebeasts/articles/cassette-beasts-more-than-a-pokemon-clone/index.html
index 1c28ad90..e5037208 100644
--- a/_site/shrines/cassettebeasts/articles/cassette-beasts-more-than-a-pokemon-clone/index.html
+++ b/_site/shrines/cassettebeasts/articles/cassette-beasts-more-than-a-pokemon-clone/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -165,13 +171,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -187,16 +213,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/cassettebeasts/articles/index.html b/_site/shrines/cassettebeasts/articles/index.html
index 2c430666..b48ca73c 100644
--- a/_site/shrines/cassettebeasts/articles/index.html
+++ b/_site/shrines/cassettebeasts/articles/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -165,13 +171,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -187,16 +213,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/cassettebeasts/featured/index.html b/_site/shrines/cassettebeasts/featured/index.html
index 5fcaf1ed..7ea708f8 100644
--- a/_site/shrines/cassettebeasts/featured/index.html
+++ b/_site/shrines/cassettebeasts/featured/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -165,13 +171,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -187,16 +213,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/cassettebeasts/gamelog/index.html b/_site/shrines/cassettebeasts/gamelog/index.html
index a1c46abb..7f77600d 100644
--- a/_site/shrines/cassettebeasts/gamelog/index.html
+++ b/_site/shrines/cassettebeasts/gamelog/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -165,13 +171,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -187,16 +213,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/cassettebeasts/index.html b/_site/shrines/cassettebeasts/index.html
index adbf6a12..2a58e54c 100644
--- a/_site/shrines/cassettebeasts/index.html
+++ b/_site/shrines/cassettebeasts/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -165,13 +171,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -187,16 +213,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/cassettebeasts/resources/index.html b/_site/shrines/cassettebeasts/resources/index.html
index 00d4f4cc..01f7ffe2 100644
--- a/_site/shrines/cassettebeasts/resources/index.html
+++ b/_site/shrines/cassettebeasts/resources/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -165,13 +171,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -187,16 +213,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/cassettebeasts/trivia/index.html b/_site/shrines/cassettebeasts/trivia/index.html
index e45ffb11..25315256 100644
--- a/_site/shrines/cassettebeasts/trivia/index.html
+++ b/_site/shrines/cassettebeasts/trivia/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -165,13 +171,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -187,16 +213,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/index.html b/_site/shrines/index.html
index 6ddf75cb..d1fcc443 100644
--- a/_site/shrines/index.html
+++ b/_site/shrines/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/articles/arren-kae-kreia-theory/index.html b/_site/shrines/starwarskotor/articles/arren-kae-kreia-theory/index.html
index 0dccfe33..5a9d0283 100644
--- a/_site/shrines/starwarskotor/articles/arren-kae-kreia-theory/index.html
+++ b/_site/shrines/starwarskotor/articles/arren-kae-kreia-theory/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/articles/faq-same-gender-romance-mods/index.html b/_site/shrines/starwarskotor/articles/faq-same-gender-romance-mods/index.html
index 717faf66..9185ea45 100644
--- a/_site/shrines/starwarskotor/articles/faq-same-gender-romance-mods/index.html
+++ b/_site/shrines/starwarskotor/articles/faq-same-gender-romance-mods/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/articles/handmaiden-sisters-mother/index.html b/_site/shrines/starwarskotor/articles/handmaiden-sisters-mother/index.html
index 73c92d44..91b07afc 100644
--- a/_site/shrines/starwarskotor/articles/handmaiden-sisters-mother/index.html
+++ b/_site/shrines/starwarskotor/articles/handmaiden-sisters-mother/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/articles/index.html b/_site/shrines/starwarskotor/articles/index.html
index 07b1d0e3..60f77325 100644
--- a/_site/shrines/starwarskotor/articles/index.html
+++ b/_site/shrines/starwarskotor/articles/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/articles/juhani-hostility-towards-canderous/index.html b/_site/shrines/starwarskotor/articles/juhani-hostility-towards-canderous/index.html
index b474e922..44339e4e 100644
--- a/_site/shrines/starwarskotor/articles/juhani-hostility-towards-canderous/index.html
+++ b/_site/shrines/starwarskotor/articles/juhani-hostility-towards-canderous/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/articles/juhani-lesbian-evidence/index.html b/_site/shrines/starwarskotor/articles/juhani-lesbian-evidence/index.html
index 4de3c3df..5d6e7ed3 100644
--- a/_site/shrines/starwarskotor/articles/juhani-lesbian-evidence/index.html
+++ b/_site/shrines/starwarskotor/articles/juhani-lesbian-evidence/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/articles/keep-juhani-a-lesbian/index.html b/_site/shrines/starwarskotor/articles/keep-juhani-a-lesbian/index.html
index 417c3d0b..93b9b875 100644
--- a/_site/shrines/starwarskotor/articles/keep-juhani-a-lesbian/index.html
+++ b/_site/shrines/starwarskotor/articles/keep-juhani-a-lesbian/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/articles/partyswap-management-takeover/index.html b/_site/shrines/starwarskotor/articles/partyswap-management-takeover/index.html
index 82bf535f..aa30e578 100644
--- a/_site/shrines/starwarskotor/articles/partyswap-management-takeover/index.html
+++ b/_site/shrines/starwarskotor/articles/partyswap-management-takeover/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/articles/tslrcm-first-kotor2-playthrough/index.html b/_site/shrines/starwarskotor/articles/tslrcm-first-kotor2-playthrough/index.html
index 10bafc08..3d169a39 100644
--- a/_site/shrines/starwarskotor/articles/tslrcm-first-kotor2-playthrough/index.html
+++ b/_site/shrines/starwarskotor/articles/tslrcm-first-kotor2-playthrough/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/guides/index.html b/_site/shrines/starwarskotor/guides/index.html
index a1421664..8a2935a2 100644
--- a/_site/shrines/starwarskotor/guides/index.html
+++ b/_site/shrines/starwarskotor/guides/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/guides/kotor-juhani-romance-guide/index.html b/_site/shrines/starwarskotor/guides/kotor-juhani-romance-guide/index.html
index 3cc74e8f..5d43952a 100644
--- a/_site/shrines/starwarskotor/guides/kotor-juhani-romance-guide/index.html
+++ b/_site/shrines/starwarskotor/guides/kotor-juhani-romance-guide/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/index.html b/_site/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/index.html
index 9b541911..d3f5cba9 100644
--- a/_site/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/index.html
+++ b/_site/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide/index.html b/_site/shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide/index.html
index a9b5af9e..f008576e 100644
--- a/_site/shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide/index.html
+++ b/_site/shrines/starwarskotor/guides/kotor-sandral-matale-feud-guide/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/index.html b/_site/shrines/starwarskotor/index.html
index 9d531363..8d360f8d 100644
--- a/_site/shrines/starwarskotor/index.html
+++ b/_site/shrines/starwarskotor/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/resources/index.html b/_site/shrines/starwarskotor/resources/index.html
index c09a402f..5e1b44fa 100644
--- a/_site/shrines/starwarskotor/resources/index.html
+++ b/_site/shrines/starwarskotor/resources/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/index.html b/_site/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/index.html
index ca86e112..d5db6aa7 100644
--- a/_site/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/index.html
+++ b/_site/shrines/starwarskotor/resources/kotor-same-gender-romance-mods/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/index.html b/_site/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/index.html
index 64c6e214..27d5f007 100644
--- a/_site/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/index.html
+++ b/_site/shrines/starwarskotor/resources/kotor2-female-exile-recruit-handmaiden-mods/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/index.html b/_site/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/index.html
index 0f843975..6818d1c6 100644
--- a/_site/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/index.html
+++ b/_site/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/shrines/starwarskotor/universes/index.html b/_site/shrines/starwarskotor/universes/index.html
index aec6f9b8..0c1e41e8 100644
--- a/_site/shrines/starwarskotor/universes/index.html
+++ b/_site/shrines/starwarskotor/universes/index.html
@@ -133,7 +133,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -162,13 +168,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -184,16 +210,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/_site/sitemap/index.html b/_site/sitemap/index.html
index 25ee7d02..a37cff9d 100644
--- a/_site/sitemap/index.html
+++ b/_site/sitemap/index.html
@@ -226,7 +226,13 @@
 
 </script>
         <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         
     
     
@@ -262,13 +268,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -284,16 +310,53 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
 
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>
+
         <main>
             <header class="main__header">
     
diff --git a/src/_includes/global/navbar.njk b/src/_includes/global/navbar.njk
index d7678224..1ca841aa 100644
--- a/src/_includes/global/navbar.njk
+++ b/src/_includes/global/navbar.njk
@@ -1,5 +1,11 @@
 <nav class="navbar">
-    <ul class="nav__menu">
+    <div class="navbar__header">
+        <button class="navbar__toggle" aria-label="Navigation menu toggle">
+            <i class="fa-solid fa-bars"></i>
+        </button>
+        <h2 class="navbar__title">Navigation</h2>
+    </div>
+    <ul class="navbar__links">
         {% block navbarLinks %}
             {{ navbarLinks }}
         {% endblock %}
@@ -9,13 +15,33 @@
 <style>
     .navbar {
         background: var(--clr-navbar-bg);
-        padding: 0 0.6rem;
+        padding: 0.6em 1em;
         width: 100%;
         z-index: 999;
         position: sticky;
         top: 0;
     }
 
+    .navbar__header {
+        display: flex;
+        align-items: center;
+        gap: 0.8em;
+    }
+
+    .navbar__toggle {
+        border: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.3rem;
+        background-color: inherit;
+        color: var(--clr-navbar-link);
+    }
+
+    .navbar__title {
+        font-size: 1.3rem;
+        color: var(--clr-navbar-link);
+    }
+
     .navbar a {
         color: var(--clr-navbar-link);
         text-decoration: none;
@@ -31,12 +57,49 @@
         outline: 0.15em solid var(--clr-navbar-link);
     }
 
-    .nav__menu {
+    .navbar__links {
         list-style: none;
-        padding: 0;
-        display: flex;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 0.5rem;
+        display: none;
+        gap: 1em;
+        padding: 0.5em 2em;
+        overflow: auto;
     }
+
+    .navbar__links--show {
+        display: grid;
+    }
+
+    /* Screen sizes larger than mobile */
+    @media only screen and (min-width: 30rem) {}
+
+    /* Tablet screen size */
+    @media only screen and (min-width: 43.75rem) {
+        .navbar {
+            padding: 0 0.6em;
+        }
+
+        .navbar__header {
+            display: none;
+        }
+
+        .navbar__links {
+            display: flex;
+            justify-content: space-evenly;
+            gap: 0.5em;
+            flex-wrap: wrap;
+            padding: 0;
+        }
+    }
+
+    /* Desktop screen size */
+    @media only screen and (min-width: 60rem) {}
 </style>
+
+<script defer>
+    const navbarToggle = document.querySelector('.navbar__toggle');
+    const navbarLinks = document.querySelector(".navbar__links");
+
+    navbarToggle.addEventListener('click', () => {
+        navbarLinks.classList.toggle("navbar__links--show");
+    });
+</script>