diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index cf4510238c8..3cbd03033fb 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -1634,6 +1634,16 @@
                 }
             }
 
+            &.o_we_header_font_row > div {
+                justify-content: space-between;
+
+                we-select {
+                    max-width: fit-content;
+                    min-width: fit-content;
+                    margin-right: 0px !important;
+                }
+            }
+
             > div {
                 display: flex;
                 align-items: center;
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 1bb0a773406..6e8ab0a57e0 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -2398,12 +2398,12 @@ options.registry.HeaderNavbar = options.Class.extend({
     async updateUI() {
         await this._super(...arguments);
         // For all header templates except those in the following array, change
-        // the label of the option to "Mobile Alignment" (instead of
+        // the title of the option to "Mobile Alignment" (instead of
         // "Alignment") because it only impacts the mobile view.
         if (!["'default'", "'hamburger'", "'sidebar'", "'magazine'", "'hamburger-full'", "'slogan'"]
-            .includes(weUtils.getCSSVariableValue("header-template"))) {
-            const alignmentOptionTitleEl = this.el.querySelector('[data-name="header_alignment_opt"] we-title');
-            alignmentOptionTitleEl.textContent = _t("Mobile Alignment");
+                .includes(weUtils.getCSSVariableValue("header-template"))) {
+            this.el.querySelector("[data-name='header_alignment_opt']").title =
+                _t("Mobile Alignment");
         }
     },
 
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 184c396f806..25bf132acea 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -2022,6 +2022,7 @@ $o-base-website-values-palette: (
 
     'header-template': 'default', // 'default' / 'hamburger' / 'vertical' / 'sidebar'
     'header-font-size': null, // Default to BS (normal font-size)
+    'header-text-color': null,
     'header-links-style': 'default', // 'default' / 'fill' / 'outline' / 'pills' / 'block' / 'border-bottom'
     'logo-height': null, // Default to navbar height (see portal)
     'hamburger-type': 'default', // 'default' / 'off-canvas'
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 716114affd1..66a45bd61de 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -309,6 +309,16 @@ $-seen-urls: ();
     @include o-add-gradient('menu-gradient');
 }
 
+// TODO this should be reviewed. While it allowed to choose a color for the
+// navbar text, there is no :hover effect, the active item is not visible and
+// the selector is probably too specific and should rather be about extending
+// bootstrap if possible.
+#wrapwrap:not(.o_header_overlay) header, header.o_header_is_scrolled {
+    .nav-item > .nav-link > *, .nav-item > .nav-link::after, .js_language_selector span, .badge {
+        color: o-website-value('header-text-color') !important;
+    }
+}
+
 $-header-nav-link-height: $nav-link-height;
 @if o-website-value('header-font-size') {
     $-header-nav-link-height: o-website-value('header-font-size') * $line-height-base + $nav-link-padding-y * 2;
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 34c88a2dd3d..975fedfb602 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -900,17 +900,6 @@
          data-selector="#wrapwrap > header nav.navbar"
          data-no-check="true"
          groups="website.group_website_designer">
-        <!-- Generic alignment option controling all the template at once. -->
-        <!-- Currently needed to be this way as the SCSS variable controls -->
-        <!-- the mobile alignement which is the same for all templates. -->
-        <we-select string="Alignment"
-                   data-name="header_alignment_opt"
-                   data-variable="hamburger-position"
-                   data-reload="/">
-            <we-button data-customize-website-views="" data-customize-website-variable="'left'">Left</we-button>
-            <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_hamburger_align_center, website.template_header_slogan_align_center" data-customize-website-variable="'center'">Center</we-button>
-            <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right, website.template_header_slogan_align_right" data-customize-website-variable="'right'">Right</we-button>
-        </we-select>
 
         <!-- Generic Hamburger Options (mobile or not) -->
         <we-select string="Hamburger Type"
@@ -933,9 +922,25 @@
             <we-button data-customize-website-views="website.option_header_off_canvas_logo_show">Image</we-button>
         </we-select>
 
-        <we-row string="Font">
-            <we-fontfamilypicker data-variable="navbar-font"/>
+        <we-fontfamilypicker string="Font" data-variable="navbar-font"/>
+
+        <we-row string="Format" class="o_we_header_font_row">
             <we-input data-customize-website-variable="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
+            <we-colorpicker data-variable="header-text-color" data-customize-website-variable=""/>
+            <!-- Generic alignment option controling all the template at once. -->
+            <!-- Currently needed to be this way as the SCSS variable controls -->
+            <!-- the mobile alignement which is the same for all templates. -->
+            <we-select class="o_we_icon_select" data-name="header_alignment_opt" data-variable="hamburger-position" data-reload="/" title="Alignment">
+                <we-button data-customize-website-views=""
+                           data-customize-website-variable="'left'"
+                           data-icon="fa-align-left"/>
+                <we-button data-customize-website-views="website.template_header_default_align_center, website.template_header_hamburger_align_center, website.template_header_slogan_align_center"
+                           data-customize-website-variable="'center'"
+                           data-icon="fa-align-center"/>
+                <we-button data-customize-website-views="website.template_header_default_align_right, website.template_header_hamburger_align_right, website.template_header_slogan_align_right"
+                           data-customize-website-variable="'right'"
+                           data-icon="fa-align-right"/>
+            </we-select>
         </we-row>
 
         <we-select string="Links Style" data-variable="header-links-style" data-reload="/">