diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index a0884d0d570..5c87b17bc7f 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -536,13 +536,14 @@
                      data-customize-website-views="website.header_shadow"
                      data-select-class="shadow"
                      data-no-preview="true"/>
-        <we-select string="Logo" data-reload="/">
-            <we-button data-customize-website-views="website.website_name">Text</we-button>
-            <we-button data-customize-website-views="website.layout_logo_show">Image</we-button>
-            <we-button data-customize-website-views="website.header_logo_none" data-name="header_logo_none_opt">None</we-button>
+
+        <we-select string="Brand" data-reload="/">
+            <we-button data-customize-website-views="" data-name="option_header_brand_none">None</we-button>
+            <we-button data-customize-website-views="website.option_header_brand_name">Text</we-button>
+            <we-button data-customize-website-views="website.option_header_brand_logo">Image</we-button>
         </we-select>
         <we-input string="⌙ Height"
-                  data-dependencies="!header_logo_none_opt"
+                  data-dependencies="!option_header_brand_none"
                   data-customize-website-variable="null"
                   data-variable="logo-height"
                   data-unit="px"
@@ -554,6 +555,7 @@
                   data-unit="px"
                   data-save-unit="rem"
                   data-dependencies="!header_effect_scroll_opt"/>
+
         <we-row string="Font">
             <we-fontfamilypicker data-variable="navbar-font"/>
             <we-input data-customize-website-variable="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 9ec0821635a..80fc63ced5d 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -128,6 +128,9 @@
         <!-- Background now controlled by css configuration, using color combinations -->
         <attribute name="class" add="o_colored_level o_cc" remove="bg-light" separator=" "/>
     </xpath>
+    <xpath expr="//header//a[hasclass('navbar-brand')]" position="replace">
+        <t t-call="website.placeholder_header_brand"/>
+    </xpath>
     <xpath expr="//header//div[@id='top_menu_collapse']" position="attributes">
         <attribute name="class" separator=" " add="flex-grow-0"/>
     </xpath>
@@ -211,12 +214,6 @@
     </xpath>
 </template>
 
-<template id="website_name" inherit_id="website.layout" name="Website Name" active="False">
-    <xpath expr="//header//a[hasclass('navbar-brand')]" position="replace">
-        <a class="navbar-brand" href="/">My Website</a>
-    </xpath>
-</template>
-
 <template id="brand_promotion" inherit_id="web.brand_promotion" name="Brand Promotion">
     <xpath expr="//t[@t-call='web.brand_promotion_message']" position="replace">
         <t t-call="web.brand_promotion_message">
@@ -290,17 +287,21 @@
     </xpath>
 </template>
 
-<template id="layout_logo_show" inherit_id="website.layout" name="Show Logo">
-    <xpath expr="//header//a[hasclass('navbar-brand')]" position="replace">
-        <a href="/" class="navbar-brand logo">
-            <span t-field="website.logo" t-options="{'widget': 'image'}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name" />
+<template id="placeholder_header_brand" name="Placeholder Header Brand">
+    <span id="o_fake_navbar_brand"/><!-- Need a fake element so that the menu is still placed correctly -->
+</template>
+
+<template id="option_header_brand_logo" inherit_id="website.placeholder_header_brand" name="Header Brand Logo" active="True">
+    <xpath expr="//*[@id='o_fake_navbar_brand']" position="replace">
+        <a href="/" t-attf-class="navbar-brand logo #{_link_class}">
+            <span t-field="website.logo" t-options="{'widget': 'image'}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name"/>
         </a>
     </xpath>
 </template>
 
-<template id="header_logo_none" inherit_id="website.layout" name="No Logo" active="False">
-    <xpath expr="//header//a[hasclass('navbar-brand')]" position="replace">
-        <a href="/" class="navbar-brand d-none"/>
+<template id="option_header_brand_name" inherit_id="website.placeholder_header_brand" name="Header Brand Name" active="False">
+    <xpath expr="//*[@id='o_fake_navbar_brand']" position="replace">
+        <a href="/" t-attf-class="navbar-brand #{_link_class}">My Website</a>
     </xpath>
 </template>