Handle nav-under issues

Orange-OpenSource · Feb 9, 2022 · aa098f1 · aa098f1
1 parent be11ed0
commit aa098f1
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 26 deletions.
diff --git a/scss/_navbar.scss b/scss/_navbar.scss
@@ -427,16 +427,6 @@
         }
 
         // Boosted mod: Offcanvas navbar is not allowed
-
-        &.flex-sm-wrap {
-          .navbar-collapse {
-            padding: $navbar-orange-navigation-padding-bottom 0;
-          }
-
-          .nav-link.active::before{
-            bottom: -$navbar-orange-navigation-padding-bottom;
-          }
-        }
       }
     }
   }
@@ -580,3 +570,22 @@
     }
   }
 }
+
+// Boosted mod
+// Handle the nav-under responsiveness
+.navbar:not(.supra) + .navbar {
+  margin-top: -1px;
+
+  .navbar-collapse {
+    padding: $navbar-orange-navigation-padding-bottom 0;
+  }
+
+  .nav-link.active::before{
+    bottom: -$navbar-orange-navigation-padding-bottom;
+  }
+
+  @include media-breakpoint-up(lg) {
+    margin-top: 0;
+  }
+}
+// End mod
diff --git a/site/layouts/shortcodes/orange-global-headers.html b/site/layouts/shortcodes/orange-global-headers.html
@@ -19,7 +19,6 @@
 {{- $title_2 := .Get "title_2" -}}
 {{- $is_title_on_2_lines := and $title $title_2 }}
 {{- $mode := .Get "mode" -}}
-{{- $demo := .Get "demo" | default false -}}
 {{- $labels := .Get "labels" | default false -}}
 {{- $labels_end := .Get "labels_end" | default false -}}
 {{- $minimized := .Get "minimized" | default false -}}
@@ -31,7 +30,7 @@
     <div class="container">
       <a class="navbar-brand" href="#">
         {{ if $responsive_logo }}
-        <img src="/docs/5.1/assets/brand/OBS-logo.svg" width="50" height="50" role="img" alt="Boosted" loading="lazy" style="width: auto">
+        <img src="/docs/5.1/assets/brand/OBS-logo.svg" width="50" height="50" role="img" alt="Boosted" loading="lazy" style="width: 100%">
         {{ else }}
         <img src="/docs/5.1/assets/brand/orange-logo.svg" width="50" height="50" role="img" alt="Boosted" loading="lazy">
         {{ end }}
@@ -104,21 +103,17 @@
             {{ if $labels }}
             <li class="nav-item"><a class="nav-link {{ cond $supra "" "active"}}" href="#">Label</a></li>
             <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
-              {{ if not $demo }}
-                <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
-              {{ end }}
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
             {{ else }}
             <li class="nav-item"><a class="nav-link {{ cond $supra "" "active"}}" href="#">Discover</a></li>
             <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
-              {{ if not $demo }}
-                <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Entertainment</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">News</a></li>
-                <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
-              {{ end }}
+            <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Entertainment</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">News</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
             {{ end }}
           </ul>
           {{ if $supra }}
@@ -139,7 +134,7 @@
     </div>
   </nav>
   {{ if $navigation }}
-  <div class="navbar navbar-dark bg-dark navbar-expand-md flex-sm-wrap p-0">
+  <nav class="navbar navbar-dark bg-dark navbar-expand-md p-0">
     <!--TODO: border should be applied on the navbar (not wide enough)-->
     <div class="container">
       <div id="{{ $id }}" class="navbar-collapse collapse">
@@ -153,5 +148,5 @@
         </ul>
       </div>
     </div>
-  </div>
+  </nav>
   {{ end }}