Update Navbar

src/App.vue

 <template>
-  <div id="app">
-    <div id="nav">
+  <div id='app'>
+    <div id='nav'>
       <navbar />
+      <img
+        src='./assets/Aktuelles_Hochschule_Deggendorf.jpg'
+        class='img-fluid w-100 h-25 header-img'
+        alt='THD Campus'
+      />
     </div>
     <router-view />
     <thdfooter />
   </div>
 </template>
 
-<style lang="scss">
+<style lang='scss'>
 //  global imports
 //  import the Bootstrap scss files and the other scss attributs
-@import "./assets/app.scss";
+@import './assets/app.scss';
 
 //  global style
 
@@ -22,6 +27,11 @@
   text-align: center;
   color: $thdblue;
 }
+@include media-breakpoint-down(md) {
+  .header-img {
+    display: none;
+  }
+}
 </style>
 
 <script>
@@ -45,7 +55,7 @@ export default {
 
 <!--
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <img alt='Vue logo' src='./assets/logo.png'>
+  <HelloWorld msg='Welcome to Your Vue.js App'/>
 </template>
 -->

src/components/navbar.vue

 <template>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
-        <div class="container-fluid">
-          <a class="navbar-brand" href="/de">
-            <img src="../assets/logos/public_src_assets_THD.png" class="img-brand" alt="Responsive image">
-          </a>
-          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-              <li class="nav-item">
-                <router-link to="/" class="nav-link active" aria-current="page">Home</router-link> <!--vue link instead of the anchor-->
-              </li>
-              <li class="nav-item">
-                <router-link to="/about" class="nav-link">About</router-link>
-              </li>
-              <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                  Dropdown
-                </a>
-                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                  <li><a class="dropdown-item" href="#">Action</a></li>
-                  <li><a class="dropdown-item" href="#">Another action</a></li>
-                  <li><hr class="dropdown-divider"></li>
-                  <li><a class="dropdown-item" href="#">Something else here</a></li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-              </li>
+  <nav
+    class="navbar navbar-expand-lg navbar-dark"
+    :class="{ 'fixed-top': isfixedtop }"
+  >
+    <div class="container-fluid">
+      <a class="navbar-brand" href="/de">
+        <img
+          src="../assets/logos/public_src_assets_THD.png"
+          class="img-brand"
+          alt="Responsive image"
+        />
+      </a>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul
+          class="navbar-nav nav-pills nav-fill nav-justified me-auto mb-2 mb-lg-0"
+          role="tabpanel"
+        >
+          <li class="nav-item">
+            <router-link to="/" class="nav-link" aria-current="page">
+              Home
+            </router-link>
+            <!--vue link instead of the anchor-->
+          </li>
+          <li class="nav-item">
+            <router-link to="/about" class="nav-link">About</router-link>
+          </li>
+          <li class="nav-item dropdown">
+            <a
+              class="nav-link dropdown-toggle"
+              href="#"
+              id="navbarDropdown"
+              role="button"
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+            >
+              Dropdown
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider" /></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
             </ul>
-             <form class="d-flex ml-auto">
-              <input class="form-control me-2 d-flex" type="search" placeholder="Search" aria-label="Search">
-                <button class="btn btn-outline-success mx-1" type="submit">Search</button>
-              </form>
-          </div>
-        </div>
-      </nav>
+          </li>
+          <li class="nav-item">
+            <a
+              class="nav-link disabled"
+              href="#"
+              tabindex="-1"
+              aria-disabled="true"
+              >Disabled</a
+            >
+          </li>
+        </ul>
+        <form class="d-flex ml-auto">
+          <input
+            class="form-control me-2 d-flex"
+            type="search"
+            placeholder="Search"
+            aria-label="Search"
+          />
+          <button class="btn btn-outline-success mx-1" type="submit">
+            Search
+          </button>
+        </form>
+      </div>
+    </div>
+  </nav>
 </template>
 
 <style>
-@media (max-width: 1300px)
-{.img-brand {
+@media (max-width: 1300px) {
+  .img-brand {
     transform: scale(0.7);
     margin-left: -30px;
   }
 }
-.img-brand
-{
-    max-width: 380px !important;
-    display: block;
-    max-width: 100%;
-    transform: scale(0.9);
+.img-brand {
+  max-width: 380px !important;
+  display: block;
+  max-width: 100%;
+  transform: scale(0.9);
 }
-.navbar{
-    background-color: rgba(47, 47, 47, 0.8) transparent;
+.navbar {
+  background-color: rgba(0, 0, 0, 0.6);
 }
+
+/* @media (max-width: 991.98px) {
+  .fixed-top {
+    position: relative !important;
+  }
+} */
 </style>
+<script>
+export default {
+  data () {
+    return {
+    }
+  },
+  methods: {
+    isfixedtop: () => {
+      if (window.innerWidth < 991) { return false } else { return true }
+    }
+  }
+}
+</script>

src/components/thdfooter.vue

@@ -4,9 +4,9 @@
       <p class="text-center">
         © 2020 |
         <a>Technische Hochschule Deggendorf</a> |
-        <a href="/de/Impressum">Impressum</a> |
-        <a href="/de/Datenschutz">Datenschutz</a> |
-        <a href="/de/Barrierefreiheit">Barrierefreiheit Erklärung</a>
+        <a href="#">Impressum</a> |
+        <a href="#">Datenschutz</a> |
+        <a href="#">Barrierefreiheit Erklärung</a>
       </p>
     </div>
   </footer>

src/views/About.vue

 <template>
-  <div>
-    <img src="../assets/public_src_assets_THD.png" class="img-fluid w-100" alt="THD Campus" />
-  </div>
   <h1>THD Mensa Information</h1>
   <p>
     here you find Information from mensa