Added a Crude Responsive Menu

css/style.css

@@ -44,13 +44,87 @@ body {
 .page-header .title {
   font-size: 2em;
   vertical-align: center;
-  padding-left: 8px;
 }
 
-.page-header .title .crumb{
+.page-header .crumb {
   font-size: 0.75em;
-  vertical-align: center;
-  padding: 2px;
+}
+
+.page-header li {
+  list-style: none;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  margin: 0;
+  background-color: #404040;
+  color: #fff;
+  height: inherit;
+}
+
+.nav-links a {
+  color: #fff;
+}
+
+.menu {
+  display: flex;
+  gap: 0.25em;
+}
+
+.menu li:hover {
+  background-color: #4c9e9e;
+  border-radius: 5px;
+  transition: 0.3s ease;
+}
+
+.menu li {
+  padding: 2px 2px;
+}
+
+input[type=checkbox]{
+  display: none;
+}
+
+/*HAMBURGER MENU*/
+.hamburger {
+  display: none;
+  font-size: 2em;
+  user-select: none;
+}
+
+/* APPLYING MEDIA QUERIES */
+@media (max-width: 1000px) {
+
+  .menu {
+    display:none;
+    position: absolute;
+    background-color: #404040;
+    top: 1em;
+    right: 0;
+    left: 0;
+    text-align: center;
+    padding: 16px 0;
+    font-size: 2em;
+  }
+
+  .menu li:hover {
+    display: inline-block;
+    background-color:#4c9e9e;
+    transition: 0.3s ease;
+  }
+
+  input[type=checkbox]:checked ~ .menu{
+    display: block;
+  }
+
+  .hamburger {
+    font-size: 0.9em;
+    padding: 24px 24px 24px 0px;
+    display: block;
+  }
 }
 
 /* Search Form Styling */

tpl/gallery.html

@@ -5,14 +5,20 @@
 {% block content %}
 <div class="container">
   <div class="page-header">
-    <div class="title">
-      <a href="{{ $startpage }}">{{ $galleryname }}</a>
-      {% if (!empty($crumbs)): %}
-      {% foreach($crumbs as $name => $path): %}
-      <span class="crumb"> / </span><a class="crumb" href="index.php?d={{ $path }}&so={{ $sort }}&s={{ $slice }}&p=1">{{ $name }}</a>
-      {% endforeach %}
-      {% endif %}
-    </div>
+    <nav class="title navbar">
+      <ul class nav-links>
+        <input type="checkbox" id="checkbox_toggle" />
+        <label for="checkbox_toggle" class="hamburger">&#9776;</label>
+        <div class="menu">
+          <li><a href="{{ $startpage }}">{{ $galleryname }}</a></li>
+          {% if (!empty($crumbs)): %}
+          {% foreach($crumbs as $name => $path): %}
+          <li><a class="crumb" href="index.php?d={{ $path }}&so={{ $sort }}&s={{ $slice }}&p=1">/ {{ $name }}</a></li>
+          {% endforeach %}
+          {% endif %}
+        </div>
+      </ul>
+    </nav>
     <div class="search">
       <form action="index.php" method="get">
         <input type="text" placeholder="Suche.." value="{{ $pretty_filter }}" name="f" />