Hide nav-bar on mobile

Author: ctrueden

_includes/layout/nav-bar

@@ -36,7 +36,7 @@ A horizontal navigation bar with links.
   {%- endcomment -%}
   {%- assign sorted-links = links | split: "|" | sort -%}
 
-  <ul class="nav-bar shadowed-box">
+  <ul id="nav-bar" class="shadowed-box">
     {%- capture page-ref -%} <a href="{{page.url}}"> {%- endcapture -%}
     {%- for link in sorted-links -%}
       {%- assign l = link -%} {%- comment -%} Loop vars are immutable! O_O {%- endcomment -%}
@@ -55,7 +55,7 @@ A horizontal navigation bar with links.
   {%- comment -%}
     Explicit list of nav-links given; use it as-is.
   {%- endcomment -%}
-  <ul class="nav-bar shadowed-box">
+  <ul id="nav-bar" class="shadowed-box">
   {% for p in pages %}
     {%- if p.url == page.url -%}
       <li>{{p.title | replace: " ", "&nbsp;"}}</li>

assets/css/layout.scss

@@ -461,7 +461,7 @@ $leftColumnArrowOffset: $sidebarWidth - 2*$sidebarMargin - 2*$sidebarPadding - 3
 
 /* Credit: https://stackoverflow.com/a/37053489/1207769 */
 
-ul.nav-bar {
+#nav-bar {
   text-align: center;
   padding: 0;
   position: sticky;
@@ -471,12 +471,12 @@ ul.nav-bar {
 	margin-right: $sidebarWidth - $sidebarPadding;
 }
 
-ul.nav-bar li {
+#nav-bar li {
   display: inline;
   padding-left: 0;
 }
 
-ul.nav-bar li::after {
+#nav-bar li::after {
 	content: " ";
 	word-spacing: 1em;
 	background-image: linear-gradient(

assets/css/page.css

@@ -19,6 +19,10 @@
     margin-top: 0;
     margin-bottom: 1rem;
     position: static;
-	  height: auto;
+    height: auto;
+  }
+
+  #nav-bar {
+    display: none;
   }
 }