diff --git a/assets/scss/_nav.scss b/assets/scss/_nav.scss
index ceba85fad8..ceb87a67b2 100644
--- a/assets/scss/_nav.scss
+++ b/assets/scss/_nav.scss
@@ -3,205 +3,211 @@
 //
 
 .td-navbar-cover {
-    background: $primary;
-
-    @include media-breakpoint-up(md) {
-        background: transparent !important;
-
-        .nav-link {
-            text-shadow: 1px 1px 2px $dark;
-        }
+  @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 .nav-link {
+    text-shadow: none;
+  }
 }
 
 .navbar-bg-onscroll {
-    background: $primary !important;
-    opacity: inherit;
+  background: $primary !important;
+  opacity: inherit;
 }
 
 .td-navbar {
-    background: $primary;
-    min-height: 4rem;
-    margin: 0;
-    z-index: 32;
+  @extend .navbar;
+  @extend .navbar-expand;
+
+  background: $primary;
+  min-height: 4rem;
+  margin: 0;
+  z-index: 32;
 
-    @include media-breakpoint-up(md) {
-        position: fixed;
-        top: 0;
-        width: 100%;
+  .navbar-brand {
+    text-transform: none;
+
+    &__name {
+      font-weight: $font-weight-bold;
     }
 
-    .navbar-brand {
-        text-transform: none;
-        text-align: middle;
-
-        &__name {
-          font-weight: $font-weight-bold;
-        }
-
-        svg {
-            display: inline-block;
-            margin: 0 10px;
-            height: 30px;
-        }
+    svg {
+      display: inline-block;
+      margin: 0 10px;
+      height: 30px;
     }
+  }
 
-    .nav-link {
-        text-transform: none;
-        font-weight: $font-weight-bold;
+  .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 {
-        white-space: nowrap;
+      padding-top: 0 !important;
     }
+  }
 
-    // For .td-search__input styling, see _search.scss
+  @include media-breakpoint-down(lg) {
+    .td-navbar-nav-scroll {
+      max-width: 100%;
+      height: 2.5rem;
+      overflow: hidden;
+      font-size: 0.9rem;
+    }
 
-    .dropdown {
-        min-width: 100px;
+    .navbar-brand {
+      margin-right: 0;
     }
 
-    @include media-breakpoint-down(lg) {
-        padding-right: .5rem;
-        padding-left: .75rem;
-
-        .td-navbar-nav-scroll {
-            max-width: 100%;
-            height: 2.5rem;
-            margin-top: .25rem;
-            overflow: hidden;
-            font-size: .875rem;
-
-            .nav-link {
-                padding-right: .25rem;
-                padding-left: 0;
-            }
-
-            .navbar-nav {
-                padding-bottom: 2rem;
-                overflow-x: auto;
-                -webkit-overflow-scrolling: touch;
-            }
-        }
+    .navbar-nav {
+      padding-bottom: 2rem;
+      overflow-x: auto;
     }
+  }
 }
 
 // Icons
 #main_navbar {
-    li i {
+  li i {
     padding-right: 0.5em;
 
-        &:before {
-            display: inline-block;
-            text-align: center;
-            min-width: 1em;
-        }
+    &:before {
+      display: inline-block;
+      text-align: center;
+      min-width: 1em;
     }
+  }
   .alert {
     background-color: inherit;
-    padding:0;
+    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;
-        }
-    }
+    &: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; }
-
+  &#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;
+    }
 
-    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;
-        }
+    .ul-1 .with-child > input:checked ~ label:hover:before {
+      color: $primary;
+      transition: color 0.3s;
     }
+  }
 }
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 03e26c9542..3b04821b76 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -2,9 +2,11 @@
     (.HasShortcode "blocks/cover")
     (not .Site.Params.ui.navbar_translucent_over_cover_disable)
 -}}
+{{ $baseURL := urls.Parse $.Site.Params.Baseurl -}}
 
-<nav class="js-navbar-scroll navbar navbar-expand navbar-dark
-            {{- if $cover }} td-navbar-cover {{- end }} flex-column flex-md-row td-navbar">
+<nav class="td-navbar navbar-dark js-navbar-scroll
+            {{- if $cover }} td-navbar-cover {{- end }}">
+<div class="container-fluid flex-column flex-md-row">
   <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
     {{- /**/ -}}
     <span class="navbar-brand__logo navbar-logo">
@@ -21,42 +23,44 @@
     {{- /**/ -}}
   </a>
   <div class="td-navbar-nav-scroll ms-md-auto" id="main_navbar">
-    <ul class="navbar-nav mt-2 mt-lg-0">
+    <ul class="navbar-nav">
       {{ $p := . -}}
       {{ range .Site.Menus.main -}}
-      <li class="nav-item me-4 mb-2 mb-lg-0">
+      <li class="nav-item">
         {{ $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 -}}
+        {{ $href := "" -}}
+        {{ with .Page -}}
+          {{ $active = or $active ( $.IsDescendant .) -}}
+          {{ $href = .RelPermalink -}}
+        {{ else -}}
+          {{ $href = .URL | relLangURL -}}
+        {{ end -}}
+        {{ $isExternal := ne $baseURL.Host (urls.Parse .URL).Host -}}
         <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 -}}
+          href="{{ $href }}"
+          {{- if $isExternal }} target="_blank" rel="noopener" {{- end -}}
         >
-            {{- with .Pre }}{{ $pre }}{{ end -}}
-            <span {{- if $active }} class="active" {{- end }}>
-              {{- .Name -}}
-            </span>
-            {{- with .Post }}{{ $post }}{{ end -}}
+            {{- .Pre -}}
+            <span>{{ .Name }}</span>
+            {{- .Post -}}
         </a>
       </li>
       {{ end -}}
       {{ if .Site.Params.versions -}}
-      <li class="nav-item dropdown me-4 d-none d-lg-block">
+      <li class="nav-item dropdown d-none d-lg-block">
         {{ partial "navbar-version-selector.html" . -}}
       </li>
       {{ end -}}
       {{ if (gt (len .Site.Home.Translations) 0) -}}
-      <li class="nav-item dropdown me-4 d-none d-lg-block">
+      <li class="nav-item dropdown d-none d-lg-block">
         {{ partial "navbar-lang-selector.html" . -}}
       </li>
       {{ end -}}
     </ul>
   </div>
-  <div class="navbar-nav d-none d-lg-block">
+  <div class="d-none d-lg-block">
     {{ partial "search-input.html" . }}
   </div>
+</div>
 </nav>
\ No newline at end of file