From f33c27cf79ba04cdc7b7bb09e6f07ba8bc45f0c7 Mon Sep 17 00:00:00 2001
From: Brandon Mercier <113701731+bram-odoo@users.noreply.github.com>
Date: Fri, 21 Mar 2025 12:44:44 +0000
Subject: [PATCH] [IMP] website_themes: layout

Add explanation about the `template_header_mobile`

closes odoo/documentation#12632

X-original-commit: 8c6fb203be2882588d8365b692127b3908f46919
Signed-off-by: Brandon Mercier (bram) <bram@odoo.com>
---
 .../howtos/website_themes/layout.rst          | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/content/developer/howtos/website_themes/layout.rst b/content/developer/howtos/website_themes/layout.rst
index 885db2eef..472a8b971 100644
--- a/content/developer/howtos/website_themes/layout.rst
+++ b/content/developer/howtos/website_themes/layout.rst
@@ -364,14 +364,24 @@ Image/pattern
 Header
 ======
 
-By default, the header contains a responsive navigation menu and the company's logo. You can easily
-add new elements or create your own template.
+By default, the header contains two distinct templates (desktop and mobile) which display the  main
+navigation, the company's logo and other optional elements (call-to-action, language selector, etc).
+Depending on the situation, choose between enabling/disabling existing elements with a standard
+template or building a brand new custom template.
 
 .. _website_themes/layout/header/standard :
 
 Standard
 --------
 
+The Odoo Website Builder distinguishes between desktop templates and the mobile template in order to
+facilitate the adaptation of the user experience according to the device.
+
+.. _website_themes/layout/header/standard/desktop :
+
+Desktop template
+~~~~~~~~~~~~~~~~
+
 Enable one of the header default templates.
 
 .. important::
@@ -404,6 +414,18 @@ Explicitly set the desired template in the `primary_variables.scss` file.
       <field name="active" eval="True"/>
    </record>
 
+.. _website_themes/layout/header/standard/mobile :
+
+Mobile template
+~~~~~~~~~~~~~~~
+
+Each header template comes with the `template_header_mobile` template ensuring a seamless user
+experience accross every devices.
+
+.. seealso::
+   `Mobile header template on Odoo's Git repository <https://github.com/odoo/odoo/blob/d053ea84d45f2ba50a31c2773f2d3ded9fd1ee6b/addons/website/views/website_templates.xml#L343>`_
+
+
 .. _website_themes/layout/header/custom :
 
 Custom
@@ -475,6 +497,16 @@ variables.
       </field>
    </record>
 
+Don't forget to adapt the `template_header_mobile` accordingly to keep consistency between desktop
+and mobile:
+
+.. code-block:: xml
+   :caption: ``website_airproof/views/website_templates.xml``
+
+   <template id="template_header_mobile" inherit_id="website.template_header_mobile" name="Airproof - Template Header Mobile">
+      <!-- Xpaths -->
+   </template>
+
 .. _website_themes/layout/header/components :
 
 Components