diff --git a/addons/portal/static/src/scss/bootstrap_overridden.scss b/addons/portal/static/src/scss/bootstrap_overridden.scss
index 3dedc5ef897..243cff2dfbd 100644
--- a/addons/portal/static/src/scss/bootstrap_overridden.scss
+++ b/addons/portal/static/src/scss/bootstrap_overridden.scss
@@ -23,6 +23,11 @@ $font-size-sm: (12 / 16) * 1rem !default;
 $btn-padding-y-sm: (1 / 16) * 1rem !default;
 $btn-padding-x-sm: (5 / 16) * 1rem !default;
 
+// Navbar
+
+$navbar-dark-toggler-border-color: transparent;
+$navbar-light-toggler-border-color: transparent;
+
 // Modals
 
 $modal-lg: $o-modal-lg;
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index aa4fc556690..8db9facdada 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -7,7 +7,7 @@
         </xpath>
         <xpath expr="//div[@id='wrapwrap']/header/img" position="replace">
             <nav class="navbar navbar-expand-md navbar-light bg-light">
-                <div class="container">
+                <div id="top_menu_container" class="container">
                     <a href="/" class="navbar-brand logo">
                         <img t-att-src="'/logo.png?company=%s' % res_company.id" t-att-alt="'Logo of %s' % res_company.name" t-att-title="res_company.name"/>
                     </a>
diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss
index a196f3e228b..8046968ebad 100644
--- a/addons/web/static/src/scss/bootstrap_review.scss
+++ b/addons/web/static/src/scss/bootstrap_review.scss
@@ -157,3 +157,17 @@ $o-btn-outline-defaults: () !default;
         }
     }
 }
+
+// Compensate navbar brand padding if no visible border
+@if alpha($navbar-dark-toggler-border-color) < 0.001 {
+    .navbar-dark .navbar-toggler {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+@if alpha($navbar-light-toggler-border-color) < 0.001 {
+    .navbar-light .navbar-toggler {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
diff --git a/addons/website/models/theme_models.py b/addons/website/models/theme_models.py
index 60323f3b57d..a5932bce5cc 100644
--- a/addons/website/models/theme_models.py
+++ b/addons/website/models/theme_models.py
@@ -184,8 +184,8 @@ class Theme(models.AbstractModel):
 
         # Reinitialize header templates
         self.disable_view('website.template_header_hamburger')
-        self.disable_view('website.template_header_hamburger_left')
-        self.disable_view('website.template_header_navbar_text_center')
+        self.disable_view('website.template_header_vertical')
+        self.disable_view('website.option_header_hamburger_center_logo')
 
         # Reinitialize footer templates
         self.enable_view('website.footer_custom')
diff --git a/addons/website/static/src/img/snippets_options/header_template_default.png b/addons/website/static/src/img/snippets_options/header_template_default.png
new file mode 100644
index 00000000000..80b79170ffb
Binary files /dev/null and b/addons/website/static/src/img/snippets_options/header_template_default.png differ
diff --git a/addons/website/static/src/img/snippets_options/header_template_hamburger.png b/addons/website/static/src/img/snippets_options/header_template_hamburger.png
new file mode 100644
index 00000000000..d85bc179e78
Binary files /dev/null and b/addons/website/static/src/img/snippets_options/header_template_hamburger.png differ
diff --git a/addons/website/static/src/img/snippets_options/header_template_vertical.png b/addons/website/static/src/img/snippets_options/header_template_vertical.png
new file mode 100644
index 00000000000..15dc33fc232
Binary files /dev/null and b/addons/website/static/src/img/snippets_options/header_template_vertical.png differ
diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index 1a1f9bc38ac..68ee1aae2a3 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -403,7 +403,7 @@ publicWidget.registry.autohideMenu = publicWidget.Widget.extend({
         this.$topMenu = this.$('#top_menu');
         this.noAutohide = this.$el.is('.o_no_autohide_menu');
         if (!this.noAutohide) {
-            await wUtils.onceAllImagesLoaded(this.$('.navbar'), this.$('.o_mega_menu'));
+            await wUtils.onceAllImagesLoaded(this.$('.navbar'), this.$('.o_mega_menu, .o_offcanvas_logo_container'));
 
             // The previous code will make sure we wait for images to be fully
             // loaded before initializing the auto more menu. But in some cases,
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 6b4c5414fe1..b94b0310e35 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1767,6 +1767,14 @@ options.registry.collapse = options.Class.extend({
 });
 
 options.registry.Header = options.Class.extend({
+    /**
+     * @override
+     */
+    async updateUI() {
+        await this._super(...arguments);
+        const isHamburger = this.$('.navbar-toggler').is(':visible');
+        this.$el.find('#hamburger_opt_label').toggleClass('d-none', isHamburger);
+    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index a68242f5c4e..96511e6472a 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -260,9 +260,11 @@ $o-base-website-values-palette: (
     'navbar-font': null,
     'buttons-font': null,
 
-    'header-template': 'logo_menu',
+    'header-template': 'default', // 'default' / 'hamburger' / 'vertical'
     'header-font-size': null, // Default to BS (normal font-size)
     'logo-height': null, // Default to navbar height (see portal)
+    'hamburger-type': 'default', // 'default' / 'off-canvas'
+    'hamburger-position': 'right', // 'right' / 'left' / 'center'
 
     'footer-template': 'products_contacts_about_us',
     'footer-effect': null, // null / 'slideout_slide_hover' / 'slideout_shadow'
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 72288fbebaa..a5763900af2 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -171,3 +171,13 @@ body.editor_enable.editor_has_snippets {
         top: var(--o-we-toolbar-height) !important;
     }
 }
+
+.editor_enable {
+    @if o-website-value('hamburger-type') == 'off-canvas' {
+        #top_menu_collapse {
+            &.collapsing, &.show {
+                left: $o-we-sidebar-width;
+            }
+        }
+    }
+}
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 6d57c9b4fc9..5e654dc2db4 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -691,14 +691,6 @@ $-transition-duration: 200ms;
         transition: transform $-transition-duration;
     }
 
-    .navbar-collapse {
-        @if o-website-value('header-template') != 'logo_hamburger' {
-            max-height: 70vh;
-        }
-        &.show {
-            overflow-y: auto;
-        }
-    }
     &.o_header_is_scrolled {
         .navbar-brand {
             font-size: $o-theme-navbar-fixed-logo-height / $line-height-base;
@@ -707,11 +699,12 @@ $-transition-duration: 200ms;
                 height: $o-theme-navbar-fixed-logo-height;
             }
         }
-        @include media-breakpoint-up(md) {
-            @if (index(('menu_logo_below', 'logo_menu_below'), o-website-value('header-template'))) != null {
+        @if o-website-value('header-template') == 'vertical' {
+            @include media-breakpoint-up(md) {
                 .navbar-brand {
                     font-size: 0px;
                     opacity: 0;
+
                     img {
                         height: 0px;
                     }
@@ -761,15 +754,22 @@ $-transition-duration: 200ms;
     }
 }
 
-// Header templates
+$-off-canvas-hamburger: o-website-value('hamburger-type') == 'off-canvas';
+$-hamburger-left: o-website-value('hamburger-position') == 'left';
+$-hamburger-center: o-website-value('hamburger-position') == 'center';
+$-hamburger-right: o-website-value('hamburger-position') == 'right';
+
 header {
     &#top {
         // We need this z-index for the shadow option of the header
         z-index: $zindex-modal - 20;
     }
     &:not(.o_header_no_transition) {
+        #top_menu_container {
+            transition: all $-transition-duration;
+        }
         .navbar-brand {
-            transition: font-size $-transition-duration, opacity $-transition-duration ease-out;
+            transition: margin $-transition-duration, font-size $-transition-duration, opacity $-transition-duration ease-out;
 
             img {
                 transition: height $-transition-duration;
@@ -777,72 +777,149 @@ header {
         }
     }
 
+    &:not(.o_header_is_scrolled) {
+        $-is-hamburger: o-website-value('header-template') == 'hamburger';
+        $-is-vertical: o-website-value('header-template') == 'vertical';
+        @include media-breakpoint-up(md) {
+            @if $-is-hamburger or $-is-vertical {
+                #top_menu_container {
+                    padding-top: $spacer * 0.5;
+                    padding-bottom: $spacer * 0.5;
+                }
+            }
+            @if $-is-vertical {
+                .navbar-brand {
+                    margin-bottom: $spacer;
+                }
+            }
+        }
+    }
+
+    .navbar {
+        flex-direction: if($-hamburger-left, row-reverse, row);
+    }
+    #top_menu_container {
+        flex-direction: inherit;
+    }
+    @if $-hamburger-right {
+        .navbar-brand {
+            margin-right: 0;
+            margin-left: $navbar-padding-x;
+        }
+    } @else if $-hamburger-center {
+        .collapsing, .show {
+            #top_menu {
+                @if not $-off-canvas-hamburger {
+                    padding-top: 15vh;
+                    padding-bottom: 15vh;
+                }
+                text-align: center;
+            }
+        }
+    }
+
     @include media-breakpoint-up(md) {
         // Allow to center the logo, ignoring the toggler space
         .o_navbar_toggler_container {
             flex: 0 0 0;
             min-width: 0;
+            direction: if($-hamburger-left, ltr, rtl);
         }
     }
-    @if index(('hamburger_logo', 'logo_hamburger'), o-website-value('header-template')) {
-        .navbar-brand {
-            text-align: center;
-        }
-        .navbar-brand, .logo img {
-            margin: auto;
-        }
-        .navbar-nav {
-            margin-top: $spacer / 2;
-        }
-        @if o-website-value('header-template') == 'logo_hamburger' {
-            .o_navbar_toggler_container {
-                direction: rtl;
-            }
-            &:not(.o_header_is_scrolled) .container {
-                padding-top: $spacer;
-                padding-bottom: $spacer;
-            }
-            .container {
-                transition: padding 200ms;
+}
 
-                #top_menu.navbar-nav {
-                    height: 90vh;
-                    padding-top : 10vh;
+@if $-off-canvas-hamburger {
+    #top_menu_collapse {
+        flex-direction: if($-hamburger-left, row, row-reverse);
+
+        &.collapsing, &.show {
+            @include o-position-absolute(0, 0, 0, 0);
+            position: fixed;
+            display: flex;
+            align-items: stretch;
+            z-index: $zindex-sticky;
+            transition: none;
+            transform: none;
+
+            .o_offcanvas_menu_backdrop {
+                @include o-position-absolute(0, 0, 0, 0);
+                opacity: .2;
+                cursor: pointer;
+            }
+
+            #top_menu {
+                overflow: auto;
+                flex-wrap: nowrap;
+                @if $-hamburger-center {
+                    width: 100%;
+                    max-width: none;
+                } @else {
+                    max-width: 560px;
+                }
+                background-color: o-color('menu');
+                transition: transform $-transition-duration cubic-bezier(.694, .0482, .335, 1);
+
+                @if $-hamburger-center {
+                    .o_offcanvas_menu_backdrop {
+                        display: none;
+                    }
+                    .o_offcanvas_menu_toggler {
+                        max-width: 90%;
+                    }
+                }
+
+                .nav-item, .o_offcanvas_logo {
+                    padding-left: $grid-gutter-width;
+                    padding-right: $grid-gutter-width;
+                }
+                .nav-item, .dropdown-menu {
+                    text-align: inherit;
+                }
+
+                // Open all dropdowns
+                .dropdown-toggle {
+                    padding-bottom: $nav-link-padding-y*0.5;
+
+                    &:after {
+                        content: none;
+                    }
                 }
                 .dropdown-menu {
-                    text-align: center;
+                    display: block;
+                    padding-top:0;
+                    border: 0;
+                    background: inherit;
+                    color: inherit;
+                }
+                .dropdown-item {
+                    padding-left: .5em;
+                    padding-right: .5em;
                 }
             }
-        }
-    } @else if index(('logo_menu_below', 'menu_logo_below'), o-website-value('header-template')) {
-        .navbar-brand {
-            text-align: center;
-        }
-        .navbar-expand-md {
-            > .container {
-                flex-wrap: wrap;
-            }
-            .navbar-collapse {
-                flex-basis: 100%;
+
+            .o_connected_user header:not(.o_header_is_scrolled) &,
+            .o_connected_user header.o_header_affixed & {
+                padding-top: $o-navbar-height;
             }
         }
-        .navbar-brand, #top_menu.navbar-nav, .logo img {
-            margin: auto;
-        }
-        .navbar-brand {
-            @include media-breakpoint-up(md) {
-                @if o-website-value('header-template') == 'menu_logo_below' {
-                    margin-top: $navbar-padding-y;
-                } @else {
-                    margin-bottom: $navbar-padding-y;
-                }
+        &.collapsing #top_menu {
+            @if o-website-value('hamburger-position') == 'center' {
+                transform: translateY(-100%);
+            } @else if o-website-value('hamburger-position') == 'left' {
+                transform: translateX(-100%);
+            } @else if o-website-value('hamburger-position') == 'right' {
+                transform: translateX(100%);
             }
         }
-        @if o-website-value('header-template') == 'menu_logo_below' {
-            .navbar-collapse {
-                @include media-breakpoint-up(md) {
-                    order: -1;
-                }
+        &.show #top_menu {
+            transform: translate(0);
+        }
+
+        .o_offcanvas_menu_backdrop {
+            @if $-hamburger-left {
+                background-image: linear-gradient(90deg, currentColor 20%, transparent);
+            } @else {
+                background-image: linear-gradient(-90deg, currentColor 20%, transparent);
             }
         }
     }
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 32a329a1f0f..3265f9f79ff 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -516,7 +516,7 @@
 
     <div data-js="menu_data"
          data-selector="#top_menu li > a"
-         data-exclude=".dropdown-toggle, li.o_header_menu_button a"
+         data-exclude=".dropdown-toggle, li.o_header_menu_button a, [data-toggle], .o_offcanvas_logo"
          data-no-check="true"/>
 
     <div data-js="company_data"
@@ -558,36 +558,52 @@
             <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"/>
         </we-row>
-        <we-select id="header_templates_select" data-variable="header-template" string="Template" data-reload="/">
-            <we-button id="option_template_header_logo_menu"
+
+        <we-select string="Template" data-variable="header-template" data-reload="/">
+            <we-button title="Default"
                        data-name="header_logo_menu_opt"
                        data-customize-website-views=""
-                       data-customize-website-variable="'logo_menu'"
-                       string="Logo - Menu"/>
-            <we-button id="option_template_header_hamburger_logo_centered"
-                       data-name="header_hamburger_logo_centered_opt"
-                       data-customize-website-views="website.template_header_hamburger, website.template_header_hamburger_left"
-                       data-customize-website-variable="'hamburger_logo'"
-                       string="Hamburger - Logo"/>
-            <we-button id="option_template_header_logo_menu_below"
-                       data-name="header_logo_menu_below_opt"
-                       data-customize-website-views=""
-                       data-customize-website-variable="'logo_menu_below'"
-                       string="Logo (Top) - Menu"/>
-            <we-button id="option_template_header_menu_logo_below"
-                       data-name="header_menu_logo_below_opt"
-                       data-customize-website-views=""
-                       data-customize-website-variable="'menu_logo_below'"
-                       string="Menu - Logo (Bottom)"/>
-            <we-button id="option_template_header_logo_hamburger"
-                       data-name="header_logo_hamburger_opt"
-                       data-customize-website-views="website.template_header_hamburger, website.template_header_navbar_text_center"
-                       data-customize-website-variable="'logo_hamburger'"
-                       string="Logo - Hamburger (cover)"/>
+                       data-customize-website-variable="'default'"
+                       data-img="/website/static/src/img/snippets_options/header_template_default.png"/>
+            <we-button title="Hamburger menu"
+                       data-name="header_hamburger_opt"
+                       data-customize-website-views="website.template_header_hamburger"
+                       data-customize-website-variable="'hamburger'"
+                       data-img="/website/static/src/img/snippets_options/header_template_hamburger.png"/>
+            <we-button title="Vertical"
+                       data-name="header_vertical_opt"
+                       data-customize-website-views="website.template_header_vertical"
+                       data-customize-website-variable="'vertical'"
+                       data-img="/website/static/src/img/snippets_options/header_template_vertical.png"/>
         </we-select>
-        <we-select id="header_effect_list" string="Effect">
-            <we-button id="option_header_effect_standard"
-                       data-name="header_effect_standard_opt"
+
+        <we-title id="hamburger_opt_label">Hamburger (Mobile)</we-title>
+        <we-select string="⌙ Type" data-variable="hamburger-type" data-reload="/">
+            <we-button data-customize-website-variable="'default'"
+                       data-customize-website-views="">Default</we-button>
+            <we-button data-name="off_canvas_menu_opt"
+                       data-customize-website-variable="'off-canvas'"
+                       data-customize-website-views="website.option_header_off_canvas">Off-Canvas</we-button>
+        </we-select>
+        <we-select string="⌙ Position" data-variable="hamburger-position" data-reload="/">
+            <we-button data-customize-website-variable="'right'">Right</we-button>
+            <we-button data-customize-website-variable="'left'">Left</we-button>
+            <we-button data-customize-website-variable="'center'">Center / Full</we-button>
+        </we-select>
+        <we-select string="⌙ Logo" data-dependencies="off_canvas_menu_opt" data-reload="/">
+            <we-button data-customize-website-views="">Text</we-button>
+            <we-button data-customize-website-views="website.option_header_off_canvas_logo_show">Image</we-button>
+        </we-select>
+        <we-checkbox string="Center Main Logo"
+                     data-dependencies="header_hamburger_opt"
+                     data-apply-to=".navbar-brand"
+                     data-customize-website-views="website.option_header_hamburger_center_logo"
+                     data-select-class="mx-md-auto"
+                     data-no-preview="true"/>
+
+        <we-select id="header_visibilities_list" string="Header Visibility">
+            <we-button id="option_header_visibility_standard"
+                       data-name="header_visibility_standard_opt"
                        data-select-class="o_header_standard"
                        data-customize-website-views="website.header_visibility_standard"
                        string="Standard"/>
@@ -612,7 +628,8 @@
                        data-customize-website-views="website.header_visibility_fade_out"
                        string="Fade Out"/>
         </we-select>
-        <we-select id="option_header_dropdown" string="Sub Menus" data-no-preview="true">
+
+        <we-select id="option_header_dropdown" string="Sub Menus" data-dependencies="!header_hamburger_opt" data-no-preview="true">
             <we-button data-select-class="o_hoverable_dropdown"
                        data-customize-website-views="website.header_hoverable_dropdown">On Hover</we-button>
             <we-button data-select-class="" data-name="header_dropdown_on_click_opt">On Click</we-button>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index ed2e5afeb69..2f772481ce6 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -128,8 +128,11 @@
         <!-- 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//div[@id='top_menu_collapse']" position="attributes">
+        <attribute name="class" separator=" " add="flex-grow-0"/>
+    </xpath>
     <xpath expr="//header//ul[@id='top_menu']" position="attributes">
-        <attribute name="class" separator=" " add="o_menu_loading"/>
+        <attribute name="class" separator=" " add="o_menu_loading" remove="text-right ml-auto"/>
     </xpath>
     <xpath expr="//header//ul[@id='top_menu']/li[hasclass('divider')]" position="attributes">
         <attribute name="t-if">website.user_id != user_id</attribute>
@@ -222,30 +225,51 @@
 </template>
 
 <!-- Header templates -->
-<template id="template_header_hamburger" inherit_id="website.layout" name="Template Header Logo Hamburger" active="False">
+<template id="template_header_hamburger" inherit_id="website.layout" name="Template Header Hamburger" active="False">
     <xpath expr="//header//nav[hasclass('navbar')]" position="attributes">
         <attribute name="class" remove="navbar-expand-md" separator=" "/>
     </xpath>
     <xpath expr="//header//button[hasclass('navbar-toggler')]" position="replace">
         <div class="o_navbar_toggler_container">$0</div>
     </xpath>
-</template>
-
-<template id="template_header_navbar_text_center" inherit_id="website.layout" name="Template Header Navbar Text Center" active="False">
-    <xpath expr="//header//ul[hasclass('nav')]" position="attributes">
-        <attribute name="class" remove="text-right" add="text-center" separator=" "/>
+    <xpath expr="//header//ul[@id='top_menu']" position="attributes">
+        <attribute name="class" separator=" " remove="text-right"/>
     </xpath>
 </template>
 
-<template id="template_header_hamburger_left" inherit_id="website.layout" name="Template Header Hamburger" active="False">
-    <xpath expr="//header//a[hasclass('navbar-brand')]" position="before">
-        <div class="o_navbar_toggler_container o_not_editable"></div>
+<template id="template_header_vertical" inherit_id="website.layout" name="Template Header Vertical" active="False">
+    <xpath expr="//header//nav[hasclass('navbar')]" position="attributes">
+        <attribute name="class" add="flex-md-column" separator=" "/>
     </xpath>
-    <xpath expr="//div[hasclass('o_navbar_toggler_container')]" position="inside">
-        <xpath expr="//header//button[hasclass('navbar-toggler')]" position="move"/>
+</template>
+
+<!-- Navbar Hamburger Options -->
+<template id="option_header_off_canvas" inherit_id="website.layout" name="Off-Canvas Header" active="False">
+    <xpath expr="//header//ul[@id='top_menu']" position="attributes">
+        <attribute name="class" separator=" " add="position-relative"/>
     </xpath>
-    <xpath expr="//header//ul[hasclass('nav')]" position="attributes">
-        <attribute name="class" remove="text-right" add="text-left" separator=" "/>
+    <xpath expr="//header//ul[@id='top_menu']" position="before">
+        <div class="o_offcanvas_menu_backdrop" data-toggle="collapse" data-target="#top_menu_collapse" aria-label="Toggle navigation"/>
+    </xpath>
+    <xpath expr="//header//ul[@id='top_menu']/t[@t-foreach='website.menu_id.child_id']" position="before">
+        <li class="o_offcanvas_menu_toggler order-first navbar-toggler text-right border-0">
+            <a href="#top_menu_collapse" class="nav-link px-3" data-toggle="collapse">
+                <span class="fa-2x">&#215;</span>
+            </a>
+        </li>
+    </xpath>
+    <xpath expr="//header//ul[@id='top_menu']/t[@t-foreach='website.menu_id.child_id']" position="after">
+        <li class="o_offcanvas_logo_container order-last navbar-toggler py-4 order-1 mt-auto text-center border-0">
+            <a href="/" class="o_offcanvas_logo text-center">My Website</a>
+        </li>
+    </xpath>
+</template>
+
+<template id="option_header_off_canvas_logo_show" inherit_id="website.option_header_off_canvas" name="Show Logo (Off-Canvas)">
+    <xpath expr="//header//a[hasclass('o_offcanvas_logo')]" position="replace">
+        <a href="/" class="o_offcanvas_logo logo">
+            <span t-field="website.logo" t-options="{'widget': 'image', 'style': 'max-width: 200px'}" role="img" t-att-aria-label="'Logo of %s' % website.name" t-att-title="website.name" />
+        </a>
     </xpath>
 </template>
 
@@ -256,6 +280,12 @@
     </xpath>
 </template>
 
+<template id="option_header_hamburger_center_logo" inherit_id="website.template_header_hamburger" name="Template Header Hamburger Center Logo" active="False">
+    <xpath expr="//header//a[hasclass('navbar-brand')]" position="attributes">
+        <attribute name="class" separator=" " add="mx-md-auto"/>
+    </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">
@@ -270,7 +300,7 @@
     </xpath>
 </template>
 
-<template id="header_visibility_standard" inherit_id="website.layout" name="Header Effect Standard">
+<template id="header_visibility_standard" inherit_id="website.layout" name="Header Visibility Standard">
     <xpath expr="//header" position="attributes">
         <attribute name="t-attf-class" add="o_header_standard" separator=" "/>
     </xpath>