diff --git a/theme/layout.html b/theme/layout.html
index 958f92995..5b936f572 100644
--- a/theme/layout.html
+++ b/theme/layout.html
@@ -47,6 +47,18 @@ <h1 class="title_header">
                 <strong>{{ theme_fixer_version_codename }} (v{{ theme_fixer_version_number }})</strong> edition
               </h1>
             </div>
+
+            {%- block navigation %}
+            <nav class="nav">
+              <ul class="menu">
+                <li class="{% if pagename.startswith('doc/installation') %}active{% endif %}"><a href="{{ pathto('doc/installation') }}">Installation</a></li>
+                <li class="{% if pagename.startswith('doc/usage') %}active{% endif %}"><a href="{{ pathto('doc/usage') }}">Usage</a></li>
+                <li class="{% if pagename.startswith('doc/config') %}active{% endif %}"><a href="{{ pathto('doc/config') }}">Configuration</a></li>
+                <li class="{% if pagename.startswith('doc/rules') %}active{% endif %}"><a href="{{ pathto('doc/rules/index') }}">Rules</a></li>
+                <li class="{% if pagename.startswith('doc/ruleSets') %}active{% endif %}"><a href="{{ pathto('doc/ruleSets/index') }}">Sets</a></li>
+              </ul>
+            </nav>
+            {% endblock %}
           </div>
         </div>
       </header>
diff --git a/theme/static/css/base.css b/theme/static/css/base.css
index 69790480d..180bfb681 100644
--- a/theme/static/css/base.css
+++ b/theme/static/css/base.css
@@ -53,7 +53,7 @@ a:visited
   right: 0;
 }
 
-.hd, .bd, .ft
+.hd, .nav, .bd, .ft
 {
   max-width: 1200px;
   min-width: 996px;
@@ -154,36 +154,33 @@ a:visited
   border-bottom: 2px dotted #fff;
 }
 
-.menu
-{
-  padding-top: 95px;
-  width: 940px;
-  font-family: Arial, sans-serif;
+ .nav {
+    background-color: transparent;
+    margin-top: 50px;
 }
 
-.menu li
+.nav .menu
 {
-  color: #ffffff;
-  font-size: 1.125em;
-  display: inline;
-  padding-right: 30px;
+  font-family: Arial, sans-serif;
+  display: flex;
+  gap: 30px;
 }
 
-.menu a
+.nav .menu a
 {
-  color: #ffffff;
+  font-size: 1.2em;
+  color: #fff;
   text-decoration: none;
 }
 
-.menu a:hover
+.nav .menu a:hover
 {
-  color: #ffffff;
   text-decoration: underline;
 }
 
-.menu a.active
+.nav .menu li.active a
 {
-  color: #444;
+  color: #fbc817;
 }
 
 .bd .content