diff --git a/includes/headfoot_foot.html b/includes/headfoot_foot.html
new file mode 100644
index 0000000000000000000000000000000000000000..1e93ac1ed6a2bff8136c938c72602a250e3fa4a3
--- /dev/null
+++ b/includes/headfoot_foot.html
@@ -0,0 +1,97 @@
+
+
+
+
+
+ Transferportal HfT Stuttgart
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
test test test test
+ test test test test 123
+ test test test test
+ test test test test
+ test test test test
+
+ test test test test
+ test test test test
+ test test test test
+ test test test test
+ test test test test
+
+ test test test test
+ test test test test
+ test test test test
+ test test test test
+ test test test test
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/headfoot.js b/js/headfoot.js
index dc8a87d3fc482a0fb5b4ecc0d25415518408b30f..5ad1aab6a3d7fce44954447be5c1fa008b59f3ca 100755
--- a/js/headfoot.js
+++ b/js/headfoot.js
@@ -43,37 +43,51 @@ function sendRequest(URL){
* creates header and prepends it to the documents body
*/
-function head(){
- let headerdiv = document.createElement('div');
- let alertdiv = document.createElement('div');
- headerdiv.classList.add("wrapper","row1");
- let navheader = document.createElement('header');
+function head() {
+ let navheader = document.createElement("header");
navheader.id = "header";
navheader.classList.add("clear");
- let alertbutton = document.createElement('button');
+
+ // disclaimer
+ let alertdiv = document.createElement("div");
+ alertdiv.classList.add("alert", "alert-danger", "alert-dismissible", "fade", "show");
+ alertdiv.style = "text-align:center;";
+ alertdiv.innerHTML="Disclaimer This website is under construction and in prototype-phase. It is not for public use."
+ let alertbutton = document.createElement("button");
alertbutton.type = "button";
alertbutton.classList.add("close");
alertbutton.setAttribute("data-dismiss", "alert");
alertbutton.innerHTML = "×";
- alertdiv.innerHTML="Disclaimer This website is under construction and in prototype-phase. It is not for public use."
prependChild(alertdiv, alertbutton);
- alertdiv.classList.add('alert','alert-danger', 'alert-dismissible', 'fade','show');
- alertdiv.style = "text-align:center;";
- navheader.appendChild(alertdiv);
- let navbar = document.createElement('nav');
- navbar.classList.add("navbar", "navbar-default");
- let fluiddiv = document.createElement('div');
- fluiddiv.classList.add("container-fluid");
- let navbardiv = document.createElement('div');
- navbardiv.classList.add("navbar-header");
- let navelements = document.createElement('ul');
- navelements.id="navelemente";
- let logos = document.createElement('li');
+
+ // navigation header
+ let navbar = document.createElement("nav");
+ navbar.classList.add("navbar", "navbar-expand-md", "navbar-light");
+ navbar.style = "background-color: #ffffff;";
+ let fluiddiv = document.createElement("div");
+ fluiddiv.classList.add("container-fluid", "navbar-header");
+ // navigation header - logo
let link_m4lab = document.createElement('a');
link_m4lab.href = "/";
- link_m4lab.innerHTML = "
";
- logos.appendChild(link_m4lab);
- navelements.appendChild(logos);
+ link_m4lab.classList.add("navbar-brand");
+ link_m4lab.innerHTML = "
";
+ // navigation header - toggle button menu for mobile devices
+ 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("aria-controls", "navbarCollapse");
+ togglebutton.setAttribute("aria-expanded", "false");
+ togglebutton.setAttribute("aria-label", "Toggle navigation");
+ togglebutton.innerHTML = "";
+ // navigation header - menu
+ let navbardiv = document.createElement("div");
+ navbardiv.classList.add("collapse", "navbar-collapse");
+ navbardiv.id = "navbarCollapse"
+ let navelements = document.createElement('ul');
+ navelements.id="navelemente";
+ navelements.classList.add("navbar-nav", "mr-auto");
for(let j = 0; j