diff --git a/website_and_docs/assets/scss/_nav.scss b/website_and_docs/assets/scss/_nav.scss
new file mode 100644
index 000000000000..a1c0ec012fc9
--- /dev/null
+++ b/website_and_docs/assets/scss/_nav.scss
@@ -0,0 +1,212 @@
+//
+// Main navbar
+//
+
+.td-navbar-cover {
+  @include media-breakpoint-up(md) {
+    background: transparent !important;
+
+    .nav-link {
+      text-shadow: 1px 1px 2px $dark;
+    }
+  }
+
+  &.navbar-bg-onscroll .nav-link {
+    text-shadow: none;
+  }
+}
+
+.navbar-bg-onscroll {
+  background: $primary !important;
+  opacity: inherit;
+}
+
+.td-navbar {
+  @extend .navbar;
+
+  background: $primary;
+  min-height: 4rem;
+  margin: 0;
+  z-index: 32;
+
+  .navbar-brand {
+    text-transform: none;
+
+    &__name {
+      font-weight: $font-weight-bold;
+    }
+
+    svg {
+      display: inline-block;
+      margin: 0 10px;
+      height: 30px;
+    }
+  }
+
+  .navbar-nav {
+    padding-top: $spacer * 0.5;
+    white-space: nowrap;
+  }
+
+  .nav-link {
+    text-transform: none;
+    font-weight: $font-weight-bold;
+  }
+
+  // For .td-search__input styling, see _search.scss
+
+  .dropdown {
+    min-width: 100px;
+  }
+
+  @include media-breakpoint-up(md) {
+    position: fixed;
+    top: 0;
+    width: 100%;
+
+    .nav-item {
+      padding-inline-end: $spacer * 0.5;
+    }
+
+    .navbar-nav {
+      padding-top: 0 !important;
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    .td-navbar-nav-scroll {
+      max-width: 100%;
+      height: 2.5rem;
+      overflow: hidden;
+      font-size: 0.9rem;
+    }
+
+    .navbar-brand {
+      margin-right: 0;
+    }
+
+    .navbar-nav {
+      padding-bottom: 2rem;
+      overflow-x: auto;
+    }
+  }
+}
+
+// Icons
+#main_navbar {
+  li i {
+    padding-right: 0.5em;
+
+    &:before {
+      display: inline-block;
+      text-align: center;
+      min-width: 1em;
+    }
+  }
+  .alert {
+    background-color: inherit;
+    padding: 0;
+    color: $secondary;
+    border: 0;
+    font-weight: inherit;
+
+    &:before {
+      display: inline-block;
+      font-style: normal;
+      font-variant: normal;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
+      font-family: $font-awesome-font-name;
+      font-weight: 900;
+      content: "\f0d9";
+      padding-left: 0.5em;
+      padding-right: 0.5em;
+    }
+  }
+}
+
+// Foldable sidebar menu
+nav.foldable-nav {
+  &#td-section-nav {
+    position: relative;
+  }
+
+  &#td-section-nav label {
+    margin-bottom: 0;
+    width: 100%;
+  }
+
+  .td-sidebar-nav__section,
+  .with-child ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .ul-1 > li {
+    padding-left: 1.5em;
+  }
+
+  ul.foldable {
+    display: none;
+  }
+
+  input:checked ~ ul.foldable {
+    display: block;
+  }
+
+  input[type="checkbox"] {
+    display: none;
+  }
+
+  .with-child,
+  .without-child {
+    position: relative;
+    padding-left: 1.5em;
+  }
+
+  .ul-1 .with-child > label:before {
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    font-family: $font-awesome-font-name;
+    font-weight: 900;
+    content: "\f0da";
+    position: absolute;
+    left: 0.1em;
+    padding-left: 0.4em;
+    padding-right: 0.4em;
+    font-size: 1em;
+    color: $gray-900;
+    transition: all 0.5s;
+    &:hover {
+      transform: rotate(90deg);
+    }
+  }
+
+  .ul-1 .with-child > input:checked ~ label:before {
+    color: $primary;
+    transform: rotate(90deg);
+    transition: transform 0.5s;
+  }
+
+  .with-child ul {
+    margin-top: 0.1em;
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  nav.foldable-nav {
+    .ul-1 .with-child > label:hover:before {
+      color: $primary;
+      transition: color 0.3s;
+    }
+
+    .ul-1 .with-child > input:checked ~ label:hover:before {
+      color: $primary;
+      transition: color 0.3s;
+    }
+  }
+}
diff --git a/website_and_docs/layouts/partials/navbar.html b/website_and_docs/layouts/partials/navbar.html
index ead45cfe4972..8b2b4d866506 100644
--- a/website_and_docs/layouts/partials/navbar.html
+++ b/website_and_docs/layouts/partials/navbar.html
@@ -10,16 +10,15 @@
 		<ul class="navbar-nav mr-4 mb-2 mb-lg-0 ps-4 ps-lg-2">
 			{{ $p := . }}
 			{{ range .Site.Menus.main }}
-			<li class="nav-item mr-4 mb-2 mb-lg-0">
-				{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
-				{{ with .Page }}
-				{{ $active = or $active ( $.IsDescendant .)  }}
-				{{ end }}
-				{{ $pre := .Pre }}
-				{{ $post := .Post }}
-				{{ $url := urls.Parse .URL }}
-				{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
-				{{ if .HasChildren }}
+			{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
+			{{ with .Page }}
+			{{ $active = or $active ( $.IsDescendant .)  }}
+			{{ end }}
+			{{ $pre := .Pre }}
+			{{ $post := .Post }}
+			{{ $url := urls.Parse .URL }}
+			{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
+			{{ if .HasChildren }}
 				<li class="nav-item dropdown">
 					<a class="nav-link {{if $active }} active{{end}} dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 						{{ .Name }}
@@ -31,10 +30,11 @@
 					{{ end }}
 					</div>
 				</li>
-				{{ else }}
-				<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ with .Pre}}{{ $pre }}{{ end }}<span{{if $active }} class="active"{{end}}>{{ .Name }}</span>{{ with .Post}}{{ $post }}{{ end }}</a>
-				{{ end }}
-			</li>
+			{{ else }}
+			    <li class="nav-item mr-4 mb-2 mb-lg-0">
+				    <a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ with .Pre}}{{ $pre }}{{ end }}<span{{if $active }} class="active"{{end}}>{{ .Name }}</span>{{ with .Post}}{{ $post }}{{ end }}</a>
+			    </li>
+			{{ end }}
 			{{ end }}
 			{{ if  .Site.Params.versions }}
 			<li class="nav-item dropdown d-none d-lg-block">