diff --git a/themes/hugo-w2ng/assets/css/site.css b/themes/hugo-w2ng/assets/css/site.css
index 8ffcecd..6fe1656 100644
--- a/themes/hugo-w2ng/assets/css/site.css
+++ b/themes/hugo-w2ng/assets/css/site.css
@@ -5,3 +5,15 @@ code {
   font-family: "Lucida Console", Monaco, monospace;
   font-size: 85%;
 }
+
+/* menu */
+
+@media (max-width: 768px) {
+  nav#menu {
+    display: none;
+  }
+  /* Style the button when the checkbox is checked */
+  #expand-toggle:checked ~ nav#menu {
+    display: block;
+  }
+}
diff --git a/themes/hugo-w2ng/layouts/partials/header.html b/themes/hugo-w2ng/layouts/partials/header.html
index f225c54..df5391a 100644
--- a/themes/hugo-w2ng/layouts/partials/header.html
+++ b/themes/hugo-w2ng/layouts/partials/header.html
@@ -1,8 +1,17 @@
 <header class="flex flex-col w-full md:w-1/5 md:text-right md:pr-8 bg-white text-center">
-    <h1 class="font-medium mt-4 md:mb-12">Wrong.Wang</h1>
+    <h1 class="font-medium mt-4 md:mb-12"><a href="#">Wrong.Wang</a></h1>
     <p class="font-thin italic">前进</p>
-    <nav class="my-2 md:flex-row-reverse">
-        <ul class="list-none  pl-0">
+    <input type="checkbox" class="hidden" id="expand-toggle" />
+    <div class="block absolute right-0 lg:hidden">
+        <label for="expand-toggle" id="expand-btn" class="flex items-center px-3 py-2 border rounded">
+            <svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <title>Menu</title>
+                <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+            </svg>
+        </label>
+    </div>
+    <nav id="menu" class="my-2 md:flex-row-reverse">
+        <ul class="list-none pl-0">
             {{ range .Site.Menus.main }}
             <li class="my-4 border-black border-b-2 md:border-none pb-1">
                 <a class="md:border-black md:border-b-2 md:pb-1" href="{{ .URL }}">{{ .Name }}</a>