navbar small screen styles and rename deployment guide in english

Holusion · Jan 27, 2025 · 4bdd162 · 4bdd162
1 parent 52e7f30
commit 4bdd162
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -56,18 +56,16 @@
 <body>
   <!-- Header -->
 
-  <nav id="navbar-top" class="navbar navbar-sticky" role="navigation">
+  <nav id="navbar-top" class="navbar navbar-sticky navbar-top" role="navigation">
 
     <div class="navbar-nav">
-
-      <button type="button" class="navbar-toggle menu-btn hidden-large" data-target="#top-nav-content"></button>
-      <ul role="menu" id="top-nav-content" class="nav-group">
-        <button type="button" class="hidden">
-          <span>Toggle navigation</span>
-        </button>
-        <a href="/{{ lang }}/" class="nav-brand" aria-label="ecorpus logo">
-          eCorpus
-        </a>
+      <ul role="menu" id="top-nav-content" class="nav-group nav-collapse">
+        <li class="nav-item">
+          <button type="button" class="navbar-toggle menu-btn hidden-large" data-target="#top-nav-content" aria-label="toggle navigation"></button>
+          <a href="/{{ lang }}/" class="nav-brand" aria-label="ecorpus logo">
+            eCorpus
+          </a>
+        </li>
         {%- for item in site.data.nav -%}
         <li class="nav-item">
           <a href="/{{ lang }}/{{ item[0] }}">{{ item[1][page.lang] }}</a>

diff --git a/_sass/base.scss b/_sass/base.scss
@@ -81,6 +81,7 @@ nav.navbar{
   margin: 0;
   padding: 1px 0;
   box-sizing: border-box;
+  position: relative;
 
 
 
@@ -89,10 +90,12 @@ nav.navbar{
   align-items: stretch;
   justify-content: space-between;
 
-  &#navbar-top{
+  &.navbar-top{
     padding-left: 2em;
-    background-color: $middlegrey;
-    box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.4);
+    &, & .nav-collapse.show{
+      background-color: $middlegrey;
+      box-shadow: 0 2px 2px 0px rgba(0, 0, 0, 0.4);
+    }
     max-height: $navbar_height;
     @media screen and  (max-width: calc($main_width - 1px) ){
       padding-left:5px;
@@ -113,17 +116,28 @@ nav.navbar{
     position: sticky;
     top: 0px;
     width: 100%;
-    z-index: 1;
+    z-index: 10;
   }
 
-  .nav-group, ul{
+  .nav-collapse{
+    //collapse nav-groups on smaller screens
     @media screen and  (max-width: calc($main_width - 1px) ){
-      > .nav-item, >li{
-        display: none;
+      > .nav-item, > li{
+        &:not(:first-child){
+          display: none;
+        }
       }
       &.show{
+        position: absolute;
+        width:100%;
+        left: 0;
+        top: 0;
+        z-index: 10;
         > .nav-item, > li{
           display: list-item;
+          &:not(:first-child){
+            padding-left: 1rem;
+          }
         }
       }
     }
@@ -184,6 +198,7 @@ nav.navbar{
 .navbar-nav{
   display: flex;
   flex-direction: row;
+  z-index: 11;
 }
 
 

diff --git a/en/doc/tutorials/deployment.md → en/doc/guides/deployment.md b/en/doc/tutorials/deployment.md → en/doc/guides/deployment.md