fix: Layout issues with menus (#6153)

* make sections scroll independently * adjustments to top nav for spacing * adjust spacing a bit more
Kong · Sep 21, 2023 · 9f959c6 · 9f959c6
1 parent b23f5da
commit 9f959c6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/app/_assets/javascripts/views/SpecView.vue b/app/_assets/javascripts/views/SpecView.vue
@@ -122,6 +122,7 @@ function initActiveProductVersionId () {
   position: sticky;
   height: calc(100vh - 60px);
   margin-top: 60px;
+  top: 60px;
   border-right: 1px solid var(--section_colors-stroke);
 }
 .sidebar {

diff --git a/app/_assets/stylesheets/header-v2.less b/app/_assets/stylesheets/header-v2.less
@@ -317,6 +317,11 @@ header.navbar-v2 {
       display: flex;
       align-items: center;
       transition: transform 0.5s;
+      max-height: 60px;
+
+      > ul {
+        max-height: 40px;
+      }
 
       .navbar-item {
         position: relative;
@@ -497,8 +502,22 @@ header.navbar-v2 {
     }
   }
 
-  @media (max-width: 1330px) {
+  @media (max-width: 1470px) {
+    .navbar-content {
+      .navbar-items {
+        .navbar-item {
+          margin-right: 20px;
+          transition: ease 0.5s;
+        }
+      }
+      .search-input-wrapper {
+        padding: 2px 8px;
+        transition: ease 0.5s;
+      }
+    }
+  }
 
+  @media (max-width: 1380px) {
     .navbar-content {
       .navbar-items {
         .navbar-button {

diff --git a/app/_assets/stylesheets/page.less b/app/_assets/stylesheets/page.less
@@ -13,10 +13,6 @@ elements-api h1 {
   padding-left: 45px !important;
 }
 
-.navbar-items > ul {
-  margin-bottom: 25px !important;
-}
-
 .submenu-section li .navbar-item {
   margin-left: 25px;
 }

diff --git a/app/_includes/nav-v2.html b/app/_includes/nav-v2.html
@@ -1,6 +1,6 @@
 <header class="navbar-v2 closed">
   <a class="skip-main" href="#main">Skip to content</a>
-  <!-- uncomment the promo-banner div when adding a new promo banner
+  <!-- uncomment the promo-banner div when adding a new promo banner-->
   <!--also uncomment the promo banner sections in app/assets/stylesheets/header.less and application.js-->
   <div id="promo-banner">
     <div class="container">