Use bootstrap class only that support RTL to style the navbar.

Previously navbar used ml-md-auto class which does not support RTL and also absolute position for the logo which does not automatically support switching to RTL. This commit adapt the navbar styling to automatically support RTL direction

Signed-off-by: Mohammed Boukhalfa <[email protected]>

Author: mboukhalfa

assets/scss/_custom.scss

@@ -130,7 +130,7 @@ body.td-404 main .error-details {
   transition: 0.3s;
 
   .navbar-brand {
-    position: absolute;
+    
     width: 45px;
     height: 44px;
     background-repeat: no-repeat;

layouts/partials/navbar.html

@@ -1,26 +1,26 @@
 {{ $cover := .HasShortcode "blocks/cover" }}
-<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }} flex-column flex-md-row td-navbar" data-auto-burger="primary">
-        <a class="navbar-brand img-fluid" href="{{ .Site.Home.RelPermalink }}"></a>
-	<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
+<nav class="js-navbar-scroll navbar navbar-expand navbar-dark {{ if $cover}} td-navbar-cover {{ end }} justify-content-center td-navbar" data-auto-burger="primary">
+        <a class="navbar-brand img-fluid d-flex " href="{{ .Site.Home.RelPermalink }}"></a>
+	<div class="td-navbar-nav-scroll w-100" id="main_navbar">
 
-		<ul class="navbar-nav mt-2 mt-lg-0">
+		<ul class="navbar-nav ml-auto w-100 justify-content-end" >
 			{{ $p := . }}
 			{{ $sections := slice "docs" "blog" "training" "partners" "community" "case-studies" }}
 			{{ range $sections }}
 			{{ with site.GetPage "section" . }}
-			<li class="nav-item mr-2 mb-lg-0">
+			<li class="nav-item">
 				{{ $active := eq .Section $.Section }}
 				<a class="nav-link{{if $active }} active{{end}}" href="{{ .RelPermalink }}" >{{ .Title }}</a>
 			</li>
 			{{ end }}
 			{{ end }}
 			{{ if  .Site.Params.versions }}
-			<li class="nav-item mr-n3 mr-lg-0 dropdown">
+			<li class="nav-item dropdown">
 				{{ partial "navbar-version-selector.html" . }}
 			</li>
 			{{ end }}
 			{{ if  (gt (len .Site.Home.Translations) 0) }}
-			<li class="nav-item mr-n4 mr-lg-0  dropdown">
+			<li class="nav-item dropdown">
 				{{ partial "navbar-lang-selector.html" . }}
 			</li>
 			{{ end }}