CSS: Make navbar white when scrolled down

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 4361940fcfcc7ce6a0303e2e68af3c31784684d0..ab6d5491748c85c8fc69195c7f0863978603dec0 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -108,11 +108,17 @@ h6 {
                @extend .inverse;
 
                transition: background-color 200ms linear;
+
+               border-bottom: 4px solid $body-bg;
+       }
+
+       .navbar-brand {
+               color: inherit;
        }
 
        .navbar-nav {
                .nav-link {
-                       color: $white;
+                       color: inherit;
 
                        &.active {
                                border-bottom: 2px solid $link-color;

diff --git a/src/templates/base.html b/src/templates/base.html
index 1cefcff0805b5b73bdecc886f27ce8cad38d1ee7..9243520d6a1fe89976ae04aba3a4beaff4fb1e0e 100644 (file)
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -23,7 +23,7 @@
                                        <svg class="icon i_hamburger"><use xlink:href="#hamburger"/></svg>
                                </button>
 
-                               <a class="navbar-brand mx-auto text-white" href="/">
+                               <a class="navbar-brand mx-auto" href="/">
                                        <strong>IPFire</strong> {% block subtitle %}{% end block %}
                                </a>