diff --git a/blog/index.html b/blog/index.html
index e3f3573..3f6c041 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -26,14 +26,20 @@
 <!-- top navbar -->
 <div class="navbar">
     <a class="nav-base nav-baselink" href="/"><i class="ph-bold ph-squares-four"></i> sneexy <small>dot</small> pages <small>dot</small> gay</a>
-    <div class="mobile-dropdown">
-        <button onclick="mobileDropdown()" class="nav-base nav-baselink-mobile"><i style="pointer-events:none;" class="ph-bold ph-squares-four"></i> s <i style="pointer-events:none;" class="ph-bold ph-dot"></i> p <i style="pointer-events:none;" class="ph-bold ph-dot"></i> g</button>
-        <div id="dropdown-box" class="dropdown-content">
-            <a href="/"><i class="ph-bold ph-house"></i> home</a>
-            <a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
-            <a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
-        </div>
-    </div>
+    <details class="nav-base nav-baselink-mobile">
+        <summary><i style="pointer-events:none;" class="ph-bold ph-squares-four"></i> s <i style="pointer-events:none;" class="ph-bold ph-dot"></i> p <i style="pointer-events:none;" class="ph-bold ph-dot"></i> g</summary>
+        <ul>
+            <li>
+                <a href="/"><i class="ph-bold ph-house"></i> home</a>
+            </li>
+            <li>
+                <a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
+            </li>
+            <li>
+                <a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
+            </li>
+        </ul>
+    </details>
     <nav class="nav-base nav-links">
         <a href="/"><i class="ph-bold ph-house"></i> home</a>
         <i class="ph-bold ph-dot"></i>
diff --git a/dni/index.html b/dni/index.html
index 2aa63f6..06630f4 100644
--- a/dni/index.html
+++ b/dni/index.html
@@ -25,14 +25,20 @@
 <!-- top navbar -->
 <div class="navbar">
     <a class="nav-base nav-baselink" href="/"><i class="ph-bold ph-squares-four"></i> sneexy <small>dot</small> pages <small>dot</small> gay</a>
-    <div class="mobile-dropdown">
-        <button onclick="mobileDropdown()" class="nav-base nav-baselink-mobile"><i style="pointer-events:none;" class="ph-bold ph-squares-four"></i> s <i style="pointer-events:none;" class="ph-bold ph-dot"></i> p <i style="pointer-events:none;" class="ph-bold ph-dot"></i> g</button>
-        <div id="dropdown-box" class="dropdown-content">
-            <a href="/"><i class="ph-bold ph-house"></i> home</a>
-            <a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
-            <a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
-        </div>
-    </div>
+    <details class="nav-base nav-baselink-mobile">
+        <summary><i style="pointer-events:none;" class="ph-bold ph-squares-four"></i> s <i style="pointer-events:none;" class="ph-bold ph-dot"></i> p <i style="pointer-events:none;" class="ph-bold ph-dot"></i> g</summary>
+        <ul>
+            <li>
+                <a href="/"><i class="ph-bold ph-house"></i> home</a>
+            </li>
+            <li>
+                <a href="/blog"><i class="ph-bold ph-article"></i> blog</a>
+            </li>
+            <li>
+                <a href="/#socials-and-contacts"><i class="ph-bold ph-link"></i> links</a>
+            </li>
+        </ul>
+    </details>
     <nav class="nav-base nav-links">
         <a href="/"><i class="ph-bold ph-house"></i> home</a>
         <i class="ph-bold ph-dot"></i>