New Navbar.scss and newnavbar. see on contactpage

Leo_Girbig · Leo_Girbig · commit 0ca281857e42 · 2020-05-03T17:44:29.000+02:00
diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -1,6 +1,5 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-default">
-  <div class="container-fluid">
-
+<nav class="navbar navbar-expand-lg fixed-top border-bottom">
+<div class="container-fluid justify-content-center">
     <div class="navbar-header">
       <a href="index.html">
         <img class="navbar-brand page-scroll navbar-logo" src="img/techAachen_Logo.svg" alt="TechAachen Logo" title="TechAachen Logo">
@@ -20,5 +19,5 @@
         <a class="nav-item nav-link aktive" href="contact.html">Kontakt</a>
       </div>
     </div>
-  </div>
+</div>
 </nav>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -5,7 +5,7 @@
 
 <body id="page-top" class="bg-light">
 
-{% include nav-page.html %}
+{% include navbar.html %}
 <div class="container">
 
 
diff --git a/_sass/_navbarold.scss b/_sass/_navbarold.scss
@@ -0,0 +1,82 @@
+.navbar-default {
+    background-color: white;
+    border-color: rgba($theme-dark, .5);
+    @include sans-serif-font;
+    @include transition-all;
+    .navbar-header .navbar-brand {
+        color: $theme-primary;
+        @include sans-serif-font;
+        font-weight: 700;
+        text-transform: uppercase;
+        &:hover,
+        &:focus {
+            color: darken($theme-primary, 10%);
+        }
+    }
+    .nav {
+        > li {
+            > a,
+            > a:focus {
+                text-transform: uppercase;
+                font-weight: 700;
+                font-size: 13px;
+                color: $theme-dark;
+                &:hover {
+                    color: $theme-primary;
+                }
+            }
+            &.active {
+                > a,
+                > a:focus {
+                    color: $theme-primary !important;
+                    background-color: transparent;
+                    &:hover {
+                        background-color: transparent;
+                    }
+                }
+            }
+        }
+    }
+    @media (min-width: 768px) {
+        background-color: transparent;
+        border-color: rgba(white, .3);
+        .navbar-header .navbar-brand {
+            color: rgba($theme-lightgrey, .7);
+            &:hover,
+            &:focus {
+                color: $theme-primary;
+            }
+        }
+        .nav > li > a,
+        .nav > li > a:focus {
+            color: rgba($theme-lightgrey, .7);
+            &:hover {
+                color: $theme-darkgrey;
+            }
+        }
+        &.affix {
+            background-color: white;
+            border-color: rgba($theme-dark, .5);
+            .navbar-header .navbar-brand {
+                color: $theme-primary;
+                font-size: 14px;
+                &:hover,
+                &:focus {
+                    color: darken($theme-primary, 10%);
+                }
+            }
+            .nav > li > a,
+            .nav > li > a:focus {
+                color: $theme-dark;
+                &:hover {
+                    color: $theme-primary;
+                }
+            }
+        }
+    }
+}
+
+.navbar-logo {
+    padding-top: 5px;
+    padding-bottom: 10px;
+}
diff --git a/_sass/navbar.scss b/_sass/navbar.scss
@@ -0,0 +1,18 @@
+.navbar {
+  background-color: inherit;
+  .nav-link{
+      color: $theme-darkgrey;
+
+      &:hover {
+          color: $theme-primary;
+}
+}
+  .navbar-brand{
+      color: $theme-darkgrey;
+}
+  .navbar-logo {
+      padding-top: 5px;
+      padding-bottom: 10px;
+      width: 5%;
+  }
+}
diff --git a/css/main.scss b/css/main.scss
@@ -11,7 +11,7 @@ $fa-font-path: "../font-awesome/fonts";
 @import "mixins";
 
 @import "base";
+@import "navbar";
 @import "button";
 @import "header";
 @import "section";
-@import "navbar-old";
