diff --git a/bwcloud.html b/bwcloud.html
index f9f5247d539ffc9feff978e8a2c6e5c2b43cf3ad..c26ea90319e029a828a7596a0c2e70fad949959b 100644
--- a/bwcloud.html
+++ b/bwcloud.html
@@ -7,6 +7,7 @@
     <title>Kollaborative Dateibearbeitung</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -79,6 +80,7 @@
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
 </body>
 
 </html>
diff --git a/confluence.html b/confluence.html
index 4e444320121e4fa5b524af81b75ad93bc40b7147..f74a55fa66e2d428c43cabf6e4b82563e61345dd 100644
--- a/confluence.html
+++ b/confluence.html
@@ -7,6 +7,7 @@
     <title>Wissensaustausch</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -83,6 +84,7 @@
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
 </body>
 
 </html>
diff --git a/css/m4lab-mobile.css b/css/m4lab-mobile.css
new file mode 100644
index 0000000000000000000000000000000000000000..8f1feb0ecb395f0cf8153dc1f332ff55c9365449
--- /dev/null
+++ b/css/m4lab-mobile.css
@@ -0,0 +1,33 @@
+body.offcanvas-active {
+  overflow: hidden;
+}
+
+.offcanvas-header {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .offcanvas-header {
+    display: block;
+  }
+
+  .navbar-collapse {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 100%;
+    width: 100%;
+    padding-right: 1rem;
+    padding-left: 1rem;
+    overflow-y: auto;
+    visibility: hidden;
+    background-color: white;
+    transition: visibility .2s ease-in-out, transform .2s ease-in-out;
+  }
+
+  .navbar-collapse.show {
+    z-index: 1;
+    visibility: visible;
+    transform: translateX(-100%);
+  }
+}
\ No newline at end of file
diff --git a/help/gitlab-pages.html b/help/gitlab-pages.html
index b278887ad9b1c80a7203947191282b9c26645f52..1baddbe24feb70a246e7ee7657faf0036a5a1157 100644
--- a/help/gitlab-pages.html
+++ b/help/gitlab-pages.html
@@ -7,6 +7,7 @@
     <title>Hilfe: Gitlab-Pages</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -643,6 +644,7 @@
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
 </body>
 
 </html>
diff --git a/help/gitlab.html b/help/gitlab.html
index bc42162f949bae75882bce4d2e0511d669a8f5ab..21310c5cd3afc5b9aff6fb337a6465f72eb31b9e 100644
--- a/help/gitlab.html
+++ b/help/gitlab.html
@@ -7,6 +7,7 @@
     <title>Hilfe: Gitlab</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -194,6 +195,7 @@
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
 </body>
 
 </html>
diff --git a/help/hpc.html b/help/hpc.html
index 575e79192a047bbc586b73b8cdb3e83a1bbd3550..bdf04898a6860f862fd54f1c959f7fddf0f4d972 100644
--- a/help/hpc.html
+++ b/help/hpc.html
@@ -7,6 +7,7 @@
     <title>Hilfe: Gitlab-Pages</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -144,6 +145,7 @@
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
 </body>
 
 </html>
diff --git a/help/index.html b/help/index.html
index c6dd6e4e8213eb4265010da8e9bda7a90b84d640..fa23d30ab75e23ac551f61c557ed4e95f1dec4e3 100644
--- a/help/index.html
+++ b/help/index.html
@@ -7,6 +7,7 @@
     <title>Hilfe</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -118,6 +119,7 @@
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
 </body>
 
 </html>
diff --git a/help/jitsi.html b/help/jitsi.html
index fcc7515793e7e6108ad3b9b57190ffb2d438befe..cd073634b353ae150054ff46bda780f54599268e 100644
--- a/help/jitsi.html
+++ b/help/jitsi.html
@@ -7,6 +7,7 @@
     <title>Hilfe: Jitsi</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -67,6 +68,7 @@
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
 </body>
 
 </html>
diff --git a/help/mailinglists.html b/help/mailinglists.html
index b9885ebdbac805491a35a383ea187942bc156e5b..9cb22572058b13d581994094cb17729d2938e536 100644
--- a/help/mailinglists.html
+++ b/help/mailinglists.html
@@ -7,6 +7,7 @@
     <title>Hilfe: Mailinglisten</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -522,6 +523,7 @@
         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
         crossorigin="anonymous"></script>
     <script src="/js/headfoot.js"></script>
+    <script src="/js/mobile.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 649889756c578064f7e6aa259f769aec880dc3e0..ae3ed47e207d1ba61ee3e7ab88f6511880bb5991 100755
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
   <title>Transferportal HfT Stuttgart</title>
   <link rel="stylesheet" href="/css/bootstrap.min.css">
   <link rel="stylesheet" href="/css/m4lab.css">
+  <link rel="stylesheet" href="/css/m4lab-mobile.css">
   <link rel="stylesheet" href="/fonts/ionicons.min.css">
   <link rel="stylesheet" href="/css/Testimonials.css">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
@@ -79,6 +80,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
 <!--<script src="./js/bootstrap-collapse.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
diff --git a/info_hpc.html b/info_hpc.html
index fc2e76ec0690f17feeb37da2ea5eef952b13b708..e0166d8a491890beaae99dd21a89ae350a6cc6d2 100644
--- a/info_hpc.html
+++ b/info_hpc.html
@@ -7,6 +7,7 @@
     <title>Infos zur Hochleistungsrechnen</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -114,6 +115,7 @@ Um dieses rechenintensive Problem zu lösen, läuft der Algorithmus auf dem HPC
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
 </body>
 
 </html>
diff --git a/info_partizipation.html b/info_partizipation.html
index 8a6a06d4c4f775653fbd99a9bada804c794325e2..8a31bda371e0007dd1d484beff51052d07af5e09 100644
--- a/info_partizipation.html
+++ b/info_partizipation.html
@@ -7,6 +7,7 @@
     <title>Infos zur Bürgerbeteiligung</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -227,6 +228,7 @@
         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
         crossorigin="anonymous"></script>
     <script src="/js/headfoot.js"></script>
+    <script src="/js/mobile.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/jira.html b/jira.html
index 808f4e9283b44d390edc5270b6c9483aa5ed9244..ff75737b1fb160e6281f9ce52d32e89ebd2aeeda 100644
--- a/jira.html
+++ b/jira.html
@@ -7,6 +7,7 @@
     <title>Aufgabenmanagement</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -84,6 +85,7 @@
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="/js/headfoot.js"></script>
+<script src="/js/mobile.js"></script>
 </body>
 
 </html>
diff --git a/js/headfoot.js b/js/headfoot.js
index fd2399141c859843977842c0b3e654a0cf1f8e00..62428bfb18cd58c83851c3eebe0c07e4909e8b94 100755
--- a/js/headfoot.js
+++ b/js/headfoot.js
@@ -80,16 +80,37 @@ function head() {
     let togglebutton = document.createElement('button');
     togglebutton.classList.add("navbar-toggler")
     togglebutton.type = "button";
-    togglebutton.setAttribute("data-toggle", "collapse");
-    togglebutton.setAttribute("data-target", "#navbarCollapse");
+    // togglebutton.setAttribute("data-toggle", "collapse");
+    togglebutton.setAttribute("data-target", "#mainNav");
     togglebutton.setAttribute("aria-controls", "navbarCollapse");
     togglebutton.setAttribute("aria-expanded", "false");
     togglebutton.setAttribute("aria-label", "Toggle navigation");
     togglebutton.innerHTML = "<span class='navbar-toggler-icon'></span>";
+
+    // main nav
+    let mainNav = document.createElement('div');
+    mainNav.setAttribute("id", "mainNav");
+    mainNav.classList.add("navbar-collapse");
+
+    // offcanvasHeader
+    let offcanvasHeader = document.createElement('div');
+    offcanvasHeader.classList.add("offcanvas-header", "mt-3");
+
+    // close button
+    let closeButton = document.createElement('button');
+    closeButton.classList.add("btn", "btn-outline-danger", "btn-close", "float-right");
+    closeButton.innerHTML = "&times Schließen";
+
+    // offcanvas title
+    let offcanvasTitle = document.createElement('h5');
+    offcanvasTitle.classList.add("py-2");
+    offcanvasTitle.innerHTML = "Hauptnavigation";
+
     // nav menu
     let navelements = document.createElement('ul');
-    navelements.id="navbarCollapse";
-    navelements.classList.add("collapse", "nav", "navbar-collapse", "navbar-nav", "justify-content-end");
+    // navelements.id="navbarCollapse";
+    // navelements.classList.add("collapse", "nav", "navbar-collapse", "navbar-nav", "justify-content-end");
+    navelements.classList.add("nav", "navbar-nav", "justify-content-end");
     for(let j = 0; j<menu.length; j++){
         let headitem = document.createElement('li');
         let itemtype = menu[j].type;
@@ -133,9 +154,12 @@ function head() {
 
     navbarcontainer.appendChild(navbarheader);
     navbarcontainer.appendChild(togglebutton);
-    navbarcontainer.appendChild(navelements);
+    offcanvasHeader.appendChild(closeButton);
+    offcanvasHeader.appendChild(offcanvasTitle);
+    mainNav.appendChild(offcanvasHeader);
+    mainNav.appendChild(navelements);
+    navbarcontainer.appendChild(mainNav);
     navbar.appendChild(navbarcontainer)
-
     navheader.appendChild(alertdiv);
     navheader.appendChild(navbar);
     prependChild(document.body, navheader);
diff --git a/js/mobile.js b/js/mobile.js
new file mode 100644
index 0000000000000000000000000000000000000000..b5b5f730a9a84334f14dd4eb0f2007ea17de5f3e
--- /dev/null
+++ b/js/mobile.js
@@ -0,0 +1,20 @@
+
+// show offcanvas menu
+$(".navbar-toggler").on("click", function () {
+  $("#mainNav").toggleClass("show");
+  $('body').toggleClass("offcanvas-active");
+});
+
+// close if press ESC button 
+$(document).on('keydown', function (event) {
+  if (event.keyCode === 27) {
+    $(".navbar-collapse").removeClass("show");
+    $("body").removeClass("overlay-active");
+  }
+});
+
+// close button 
+$(".btn-close").click(function (e) {
+  $(".navbar-collapse").removeClass("show");
+  $("body").removeClass("offcanvas-active");
+});
\ No newline at end of file
diff --git a/videoconference.html b/videoconference.html
index a499b27bcd141d3a812e9c6b52bf94db70736a35..0eaa5a8b7610e48a9dc44a12ba1ae8d9dc07d32b 100644
--- a/videoconference.html
+++ b/videoconference.html
@@ -7,6 +7,7 @@
     <title>Videokonferenzen</title>
     <link rel="stylesheet" href="/css/bootstrap.min.css">
     <link rel="stylesheet" href="/css/m4lab.css">
+    <link rel="stylesheet" href="/css/m4lab-mobile.css">
     <link rel="stylesheet" href="/fonts/font-awesome.min.css">
     <link rel="stylesheet" href="/fonts/ionicons.min.css">
     <link rel="stylesheet" href="/css/Testimonials.css">
@@ -149,6 +150,7 @@
         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
         crossorigin="anonymous"></script>
     <script src="/js/headfoot.js"></script>
+    <script src="/js/mobile.js"></script>
 </body>
 
 </html>