hide some header options on mobile

LinkSake · Sep 15, 2024 · eaa0e66 · eaa0e66
1 parent 94b256b
commit eaa0e66
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/layouts/partials/head_custom.html b/layouts/partials/head_custom.html
@@ -6,14 +6,14 @@
       {{ $section := lower .Section }}
       {{ range .Site.Menus.main }}
       {{ $name := lower .Name }}
-      <li class="pull-left {{ if eq $name $title }}current{{ else if eq $section $name }}current{{ else if eq $title (pluralize $name) }}current{{ end }}">
+      <li class="pull-left {{ if eq $name $title }}hide-on-mobile{{ else if eq $section $name }}current{{ else if eq $title (pluralize $name) }}current{{ end }}">
         <a href="{{ absLangURL .URL }}">~/{{ lower .Name }}</a>
       </li>
       {{end}}
 
       {{ range .Site.Menus.feed }}
       {{ $name := lower .Name}}
-      <li class="pull-right">
+      <li class="pull-right hide-on-mobile">
         <a href="{{ absLangURL .URL }}">~/{{ lower .Name}}</a>
       </li>
       {{end}}

diff --git a/static/css/theme-override.css b/static/css/theme-override.css
@@ -71,3 +71,14 @@ li {
 
 }
 
+/* For devices larger than a phablet */
+@media (min-width: 550px) {
+}
+
+/* For devices smaller than a phablet */
+@media (max-width: 550px) {
+  .hide-on-mobile {
+    display: none;
+  }
+}
+