Handy Version, DONE

burgerIcon.js

@@ -0,0 +1,111 @@
+
+
+function openNav() {
+    var showNav = `
+    #CandleID{
+        opacity: 0;
+        pointer-events: none;
+    }
+    #uberuns{
+        pointer-events: auto;
+        opacity: 1;
+      }
+      #buecher{
+        pointer-events: auto;
+        opacity: 1;
+      }
+      #meinebuecher{
+        pointer-events: auto;
+        opacity: 1;
+      }
+    
+      #nav-toggle {
+        opacity: 1;
+        pointer-events: auto;
+      }
+      .suchleiste{
+        opacity: 1;
+        pointer-events: auto;
+      }
+      #buttonID{
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .suchleiste{
+        position: fixed;
+        right: 280px;
+        top: 0px;
+      }
+      #buttonID{
+        position: fixed;
+        right: 240px;
+        top: 0px;
+      }
+      #uberuns{
+        position: fixed;
+        left: 340px;
+        top: 43px;
+      }
+      #buecher{
+        position: fixed;
+        left: 340px;
+        top: 96px;
+      }
+
+      #meinebuecher{
+        position: fixed;
+        left: 340px;
+        top: 150px;
+      }
+
+
+    `;
+    var closeNav =  `#CandleID{
+        opacity: 1;
+        pointer-events: auto;
+    }
+    `;
+    if (document.getElementById('nav-toggle').checked) {
+		var styleSheet = document.createElement("style")
+		styleSheet.innerText = showNav
+		document.head.appendChild(styleSheet)
+    } else {
+        var link = document.createElement('link');
+ 
+        // set the attributes for link element
+           link.rel = 'stylesheet';
+     
+        link.type = 'text/css';
+     
+        link.href = 'probestyle.css';
+ 
+        // Get HTML head element to append
+        // link element to it
+        document.getElementsByTagName('HEAD')[0].appendChild(link);
+        var styleSheet = document.createElement("style")
+		styleSheet.innerText = closeNav
+		document.head.appendChild(styleSheet)
+    }
+}
+
+function unset()
+{
+    var link = document.createElement('link');
+ 
+    // set the attributes for link element
+       link.rel = 'stylesheet';
+ 
+    link.type = 'text/css';
+ 
+    link.href = 'probestyle.css';
+
+    // Get HTML head element to append
+    // link element to it
+    document.getElementsByTagName('HEAD')[0].appendChild(link);
+    var styleSheet = document.createElement("style")
+    styleSheet.innerText = closeNav
+    document.head.appendChild(styleSheet)
+}
+
+	

probe.html

@@ -12,7 +12,7 @@
         <header>
                 <h1 class="kopf" >
                     <br><br>
-                    Bibliothek <img src="pictures/Candle.png" alt="Bild von einer Kerze"
+                    Bibliothek <img id="CandleID" src="pictures/Candle.png" alt="Bild von einer Kerze"
                      width="200" height="200"/>
                      <br><br> Candle
                 </h1>  
@@ -20,7 +20,7 @@
                     <a id="uberuns" href="uberUns.html">Über Uns</a>
                     <a  id="buecher" href="bücher.html">Bücher</a> 
                     <a  id="meinebuecher" href="meineBücher.html">Meine Bücher</a>
-                    <form action="">
+                    <form  action="">
                         <input class="suchleiste" type="search" placeholder="Suche..."  >
                         <button type="submit" id="buttonID" class="searchButton"><i class="fa fa-search"></i> </button> 
                     </form>
@@ -28,7 +28,7 @@
                     
                 </div>
         </header>
-        <div class="homepage">
+        <div class="homepage"> 
             <img src="pictures/sidecandle.png" id="sidecandle" alt="sidecandle">
             <p class="p1">
                 <span id="titleschwarz">HERZLICH WILLKOMMEN!</span> 
@@ -54,6 +54,32 @@
 
             </p>
         </div> 
+        <!--Link JS file-->
+        <script src="burgerIcon.js"></script>
+        <!--If it was small and got big, it calls the function only one time and doesn't do it all the time-->
+        <script>
+            var widthissue = false;
+      window.addEventListener("resize", function(event) {
+        if(window.innerWidth > 800 && widthissue) {
+            widthissue = false
+            unset()
+        } 
+        else if(window.innerWidth < 800) widthissue = true;
+})
+        
+        </script>
+
+        <nav id="activeid" class="active">  
+            <div class="navLinks">    
+              <input class="nav-toggleclass"id="nav-toggle" type="checkbox" onclick="openNav()";> 
+              <label for="nav-toggle" class="icon-burger" >
+                    <div class="line"></div>
+                    <div class="line"></div>
+                    <div class="line"></div>
+                </label>
+            </nav>
+
+
         <footer class="fuss" >
             <div> 
                 <a id="impressum" href="impressum.html">Impressum</a>

probestyle.css

@@ -143,7 +143,7 @@ body{
 .p2{
   overflow-y: scroll;
   max-width: 87%;
-  max-height: 450px;
+  max-height: 100%;
   position: fixed;
   top: 220px;
   left: 20px;
@@ -343,6 +343,9 @@ body{
   height: 800px;
   width: 12%
 }
+
+
+/*extra Large Devices*/
 @media screen and (max-width:1200px){
   #sidecandle{
     width: 12%;
@@ -355,7 +358,7 @@ body{
   }
 }
 
-
+/*Large Devices*/
 @media screen and (max-width:1000px){
   #sidecandle{
     width: 14%;
@@ -367,6 +370,7 @@ body{
     max-width: 84%;
   }
 }
+/*medium Devices*/
 @media screen and (max-width:800px){
   #sidecandle{
     width: 16%;
@@ -377,7 +381,73 @@ body{
   .p2{
     max-width: 81%;
   }
+  /*Burger Menu*/
+/*invisibility and deactivate buttons*/
+  #uberuns{
+    pointer-events: none;
+    opacity: 0;
+  }
+  #buecher{
+    pointer-events: none;
+    opacity: 0;
+  }
+  #meinebuecher{
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  #nav-toggle {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .suchleiste{
+    opacity: 0;
+    pointer-events: none;
+  }
+  #buttonID{
+    opacity: 0;
+    pointer-events: none;
+  }
+  /*Reposition*/
+  #erweitertesuche{
+    position: fixed;
+    right: 60px;
+    top: 15px;
+  }
+  
+  /*Burger Icon creation and position*/
+  .icon-burger {
+    display: none;
+    position: fixed;
+    top: 2%;
+    right: 1%;
+    transform: translateY(-50%);
+    cursor:pointer;
+  }
+   .icon-burger .line {
+    width: 30px;
+    height: 5px;
+    background-color: #fff;
+    margin: 5px;
+    border-radius: 3px;
+    transition: all .3s ease-in-out;
+  }
+  nav .icon-burger {
+		display: block;
+	}
+    /*Burger Icon rotation / Animation*/
+	nav :checked ~ .icon-burger .line:nth-child(1) {
+		transform: translateY(10px) rotate(225deg);
+	}
+	nav :checked ~ .icon-burger .line:nth-child(3) {
+		transform: translateY(-10px) rotate(-225deg);
+	}
+	nav :checked ~ .icon-burger .line:nth-child(2) {
+		opacity: 0;
+	}
+
 }
+/*small Devices*/
 @media screen and (max-width:620px){
  
   #sidecandle{
@@ -485,7 +555,10 @@ body{
     top: 640px;
   }
 
-  
+  /*Burger Menu*/
+
+
+
 }