diff --git a/_includes/header.html b/_includes/header.html
index 4d085ef..1f00f2a 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -15,11 +15,12 @@
 		{%- endfor -%}
 
 		<span class='more'>
-		{%- comment -%} todo: maybe make this collapsible? {%- endcomment -%}
-		{%- for html_page in less_important -%}
-			<a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>{{ html_page.title }}</a>
-		{%- endfor -%}
-		</span>
+			<div id='show-more'><!--sir... it's the demons again... they're pinging the-->&hellip;</div>
+			{%- comment -%} todo: maybe make this collapsible? {%- endcomment -%}
+			{%- for html_page in less_important -%}
+				<a href='{{ html_page.url }}' {%- if page.title == html_page.title %} class='current'{% endif -%}>{{ html_page.title }}</a>
+			{%- endfor -%}
+			</span>
 	</span>
 
 	<span class='other'>
diff --git a/assets/script.js b/assets/script.js
index 9fd5bb1..adaee50 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -66,6 +66,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
 		this.classList.toggle('active');
 		dgel('header').classList.toggle('active');
 		dgel('main').classList.toggle('active');
+	};
+
+	dgel('show-more').onclick = function () {
+		this.parentElement.classList.toggle('show');
 	}
 });
 // @license-end
\ No newline at end of file
diff --git a/assets/style.css b/assets/style.css
index 0a75abb..ed2d8ee 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -126,10 +126,12 @@ html.night .donation-method::before {
 
 header {
 	background: mediumpurple;
+	color: white;
 	padding: 0 30px;
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap;
+	user-select: none;
 }
 header h1 {
 	display: none;
@@ -140,15 +142,12 @@ header span {
 	display: inline-block;
 	text-align: center;
 }
-header a {
+header a, #show-more {
 	color: white;
 	display: inline-block;
 	padding: 5px 15px;
 	transition: 0.2s all;
 }
-html.night header a {
-	color: white;
-}
 header a.current {
 	background: linear-gradient(to bottom, white, #fafafa);
 	color: mediumpurple;
@@ -157,13 +156,20 @@ header a.current {
 html.night header a.current {
 	background: linear-gradient(to bottom, #282828, #333);
 }
-header a:hover {
+header a:hover, #show-more:hover {
 	background-color: #fff8;
 }
-html.night header a:hover {
+html.night header a:hover,
+hrml.night #show-more:hover {
 	background-color: #0008;
 }
 
+#show-more {
+	display: none;
+	padding: 5px;
+	cursor: default;
+}
+
 .lynnesoft {
 	background: center/contain url('/assets/img/lynnesoft.png') no-repeat;
 	height: 30px;
@@ -261,6 +267,19 @@ html.night #theme-control::before {
 	display: block;
 }
 
+@media only screen and (max-width: 1200px) {
+	/* when the moon hits your eye like a big pizza pie that's a*/
+	.more a {
+		display: none;
+	}
+	.more.show a {
+		display: inline-block;
+	}
+	#show-more {
+		display: inline-block;
+	}
+}
+
 @media only screen and (max-width: 1000px) {
 	#main {
 		width: 95%;
@@ -333,6 +352,13 @@ html.night #theme-control::before {
 		padding-bottom: 20px;
 	}
 
+	.more a {
+		display: inline-block;
+	}
+	#show-more {
+		display: none;
+	}
+
 	#theme-control {
 		width: max-content;
 		margin: 0 auto;