Jelajahi Sumber

Navbar padding top fixed for website

benc1 4 tahun lalu
induk
melakukan
f08819a440
1 mengubah file dengan 16 tambahan dan 9 penghapusan
  1. 16 9
      scss/_navbar.scss

+ 16 - 9
scss/_navbar.scss

@@ -50,6 +50,12 @@
       @extend %container-flex-properties;
     }
   }
+
+  .container-fluid {
+    position: relative;
+    height: ($navbar-toggler-padding-y * 2) + $navbar-toggler-font-size +
+      1.625rem;
+  }
 }
 
 // Navbar brand
@@ -57,12 +63,12 @@
 // Used for brand, project, or site names.
 
 @font-face {
-  font-family: 'Alegreya';
+  font-family: "Alegreya";
   src: url(../font/Alegreya-VariableFont_wght.ttf);
 }
 
 @font-face {
-  font-family: 'Alegreya-Italic';
+  font-family: "Alegreya-Italic";
   src: url(../font/Alegreya-Italic-VariableFont_wght.ttf);
 }
 
@@ -70,13 +76,13 @@
   &.navbar-brand-logo {
     margin-left: $navbar-brand-margin-end * 2;
     padding-left: 120px;
-    font-family: 'Alegreya', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: "Alegreya", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     font-weight: bolder;
     color: $primary !important;
     font-size: 2rem;
 
     &::before {
-      content: ' ';
+      content: " ";
       display: inline-block;
       width: 120px;
       height: 110px;
@@ -92,8 +98,8 @@
     }
 
     &::after {
-      content: ' ';
-      background-image: url('../img/hbbq_logo.png');
+      content: " ";
+      background-image: url("../img/hbbq_logo.png");
       display: inline-block;
       position: absolute;
       top: 50%;
@@ -169,17 +175,16 @@
   // For always expanded or extra full navbars, ensure content aligns itself
   // properly vertically. Can be easily overridden with flex utilities.
   align-items: center;
+  justify-content: flex-end;
 
   .navbar-nav {
     align-items: flex-end;
-    flex-direction: row;
-    justify-content: space-between;
 
     .nav-item {
       padding-left: $navbar-brand-margin-end;
 
       .nav-link {
-        padding-right: 0.5rem;
+        padding-right: 1rem;
         padding-left: 0.5rem;
       }
     }
@@ -260,6 +265,8 @@
         .navbar-collapse {
           display: flex !important; // stylelint-disable-line declaration-no-important
           flex-basis: auto;
+          position: absolute;
+          right: 0.5rem;
         }
 
         .navbar-toggler {