diff --git a/themes/typing/layout/_partial/header.ejs b/themes/typing/layout/_partial/header.ejs
index d3d644c..3d6ec0e 100644
--- a/themes/typing/layout/_partial/header.ejs
+++ b/themes/typing/layout/_partial/header.ejs
@@ -8,10 +8,10 @@
   <%/* Nav menu for mobile */%>
   <nav class="mobile-nav">
     <h1 class="nickname"><%= theme.nickname %></h1>
-    <ul id="mobile-nav-menu">
-    <label for="menu-toggle"><a>&#9776; Menu</a></label>
-    <input type="checkbox" id="menu-toggle"/>
-    <ul id="menu">
+    <ul class="mobile-nav-menu">
+    <label for="mobile-menu-toggle"><a>&#9776; Menu</a></label>
+    <input id="mobile-menu-toggle" type="checkbox"/>
+    <ul class="mobile-nav-link">
     <% for (let i in theme.menu) { %>
       <a href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
     <% } %>
diff --git a/themes/typing/source/css/typing.css b/themes/typing/source/css/typing.css
index a1c2940..75192d7 100644
--- a/themes/typing/source/css/typing.css
+++ b/themes/typing/source/css/typing.css
@@ -1079,13 +1079,13 @@ pre .javascript .function,pre .keyword {
 
 /* hide mobile nav menu and its checkbox */
 /* when it's not mobile */
-.mobile-nav,#menu-toggle,#menu{
+.mobile-nav,#mobile-menu-toggle,.mobile-nav-link{
   display: none
 }
 
 /* align the text (in nav menu) to right */
 /* set line-height in /archives page */
-#mobile-nav-menu{
+.mobile-nav-menu{
   text-align: right;
   line-height: 1.8
 }
@@ -1129,7 +1129,7 @@ pre .javascript .function,pre .keyword {
 
   /* display links when menu button is clicked */
   /* use grid to display each link in new line */
-  #menu-toggle:checked + #menu{
+  #mobile-menu-toggle:checked + .mobile-nav-link{
     display: grid;
     display: -ms-grid;
     border: 2px solid #999;