🐛 Forced dropdown menu under header

A lot a conflicting css so I chose to force 'top:44px'. It's not clean but it will do for now
snowcamp · Nov 4, 2023 · c35a8a8 · c35a8a8
1 parent aa5c8ce
commit c35a8a8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/components/Menu.astro b/src/components/Menu.astro
@@ -22,8 +22,7 @@ const path_en = path.replace('/fr/','/');
                       </a>
                     </div>
                   </div>
-
-                  <div class="expand navbar-expand" id="menu">
+                  <div class="navbar-expand">
                     <ul class="nav navbar-nav snc-nav">
                       <li class="dropdown">
                         <a href="#" class="snc-scroll dropdown-toggle" data-toggle="dropdown" role="button"

diff --git a/src/styles/nav.less b/src/styles/nav.less
@@ -31,8 +31,10 @@
 .snc-header .snc-toggle i {
   font-size: 26px
 }
-.snc-header .navbar-nav >  li {
-  margin: 0 5px;
+.snc-header .navbar-nav {
+  & > li:not(:last-child) {
+    margin-right: 20px;
+  }
 }
 .snc-header .navbar-nav li li {
   min-width: 170px;
@@ -80,18 +82,23 @@
 }
 
 .snc-header .snc-navbar {
+  --bs-navbar-padding-y: 0;
+  --bs-navbar-padding-x: 0;
   margin-bottom: 0;
   border: none;
   background: 0 0;
   border-radius: 0
 }
 
 .snc-header .snc-navbar .snc-nav {
-  position: relative;
   -webkit-animation-name: fadeInRight;
   animation-name: fadeInRight;
   transform-origin: center;
-  float: right
+}
+
+.navbar-expand .navbar-nav .dropdown-menu {
+  position: absolute;
+  top: 44px
 }
 
 .snc-header .snc-navbar .snc-nav li a {