[camel-website] 01/02: Improvement upon the navbar-menu

[zr...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

zregvart pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/camel-website.git

commit 8469acf7064d82d5ce13caf5a690b43cdfd8704e
Author: Prerna <ps...@gmail.com>
AuthorDate: Thu Mar 12 02:30:36 2020 +0530

    Improvement upon the navbar-menu
---
 antora-ui-camel/src/css/header.css | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/antora-ui-camel/src/css/header.css b/antora-ui-camel/src/css/header.css
index 9b4a760..5d5f64b 100644
--- a/antora-ui-camel/src/css/header.css
+++ b/antora-ui-camel/src/css/header.css
@@ -163,7 +163,7 @@ body {
   margin: 0.25rem 0;
 }
 
-@media screen and (max-width: 1023px) {
+@media screen and (max-width: 1023px) and (min-width: 480px) {
   .navbar-brand .navbar-item {
     display: flex;
     align-items: flex-start;
@@ -178,11 +178,11 @@ body {
   .navbar-menu.is-active {
     display: block;
     position: absolute;
-    height: calc(100vh - 4rem);
+    height: calc(90vh - 6rem);
     box-shadow: 0 16px 16px 0 rgba(10, 10, 10, 0.1);
     overflow-y: auto;
     top: 4rem;
-    left: 0;
+    left: auto;
     right: 0;
   }
 
@@ -192,6 +192,24 @@ body {
   }
 }
 
+@media screen and (max-width: 479px) {
+  .navbar-menu.is-active {
+    display: block;
+    position: absolute;
+    height: calc(100vh - 4rem);
+    box-shadow: 0 16px 16px 0 rgba(10, 10, 10, 0.1);
+    overflow-y: auto;
+    top: 4rem;
+    left: 0;
+    right: 0;
+  }
+
+  .navbar-menu {
+    background: var(--navbar-menu-background);
+    padding: 0.5rem 0;
+  }
+}
+
 @media screen and (min-width: 1024px) {
   .navbar,
   .navbar-menu,