Hide dropdown on mobile screen (#48)

* hide dropdown on small screen
* change height of dropdown

Author: onukura

_includes/header.html

@@ -12,22 +12,15 @@
         </svg>
       </a>
 
-      <label for="category-selector">Category:</label>
-      <select class="category-dropdown" name="category-selector" onChange="location.href=value;">
-        {% for category in site.data.plugins %}
-        <option value="#{{ category.id }}">{{ category.name }}</option>
-        {% endfor %}
-      </select>
-
-      <div class="trigger">
-<!--          
-        {% for page in site.pages %}
-          {% if page.title %}
-          <a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
-          {% endif %}
-        {% endfor %}
--->
+      <div class="dropdown">
+        <label for="category-selector" class="category-dropdown-label">Category:</label>
+        <select class="category-dropdown" name="category-selector" onChange="location.href=value;">
+          {% for category in site.data.plugins %}
+          <option value="#{{ category.id }}">{{ category.name }}</option>
+          {% endfor %}
+        </select>
       </div>
+
     </nav>
 
   </div>

_sass/_layout.scss

@@ -231,13 +231,18 @@
 }
 
 .category-dropdown {
-    width: 200px;
+    width: 60%;
     height: 40px;
     border-color: rgb(235, 230, 230);
     font-size: 15px;
-    position: relative;
 }
 
+@media screen and (max-width: 600px) {
+    .dropdown {
+        display: none;
+    }
+  }
+
 html {
     scroll-behavior: smooth;
 }