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. +.. _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 `_ + + .. _website_themes/layout/header/custom : Custom @@ -475,6 +497,16 @@ variables. +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`` + + + .. _website_themes/layout/header/components : Components