diff --git a/addons/mail/static/src/less/client_action.less b/addons/mail/static/src/less/client_action.less
index 8811eb28f4f..b2749199ca4 100644
--- a/addons/mail/static/src/less/client_action.less
+++ b/addons/mail/static/src/less/client_action.less
@@ -312,15 +312,6 @@
     .o_mail_navbar_dropdown {
         width: 350px;
         padding: 0;
-        @media (max-width: @screen-xs-max) {
-            background-color: white!important;
-            max-height: none!important;
-            position: fixed!important;
-            top: @navbar-height;
-            right: 0;
-            bottom: 0;
-            left: 0;
-        }
 
         .o_spinner {
             .o-flex-display();
diff --git a/addons/web/static/src/less/navbar.less b/addons/web/static/src/less/navbar.less
new file mode 100644
index 00000000000..8dcacd1c45c
--- /dev/null
+++ b/addons/web/static/src/less/navbar.less
@@ -0,0 +1,174 @@
+
+.o_main_navbar {
+    position: relative;
+    height: @odoo-navbar-height;
+    border: 1px solid @odoo-navbar-inverse-link-hover-bg;
+    background-color: @odoo-brand-primary;
+    color: white;
+    .box-shadow(0px 0px 8px @odoo-main-text-color);
+
+    > button {
+        float: left;
+        width: @odoo-navbar-height - 2;
+        height: @odoo-navbar-height - 2;
+        border: none;
+        padding: 0;
+        line-height: @odoo-navbar-height - 2;
+        background-color: transparent;
+        
+        font-size: 18px;
+        .user-select(none);
+
+        &:hover, &:focus {
+            background-color: @odoo-navbar-inverse-link-hover-bg;
+        }
+        &:focus, &:active, &:focus:active {
+            outline: none;
+        }
+
+        &.o_menu_toggle {
+            margin-right: 5px;
+        }
+    }
+
+    > ul {
+        display: block;
+        float: left;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        > li {
+            position: relative;
+            display: block;
+            float: left;
+
+            > a {
+                display: block;
+                height: @odoo-navbar-height - 2;
+                padding: 0 10px;
+                color: white;
+                line-height: @odoo-navbar-height - 2;
+
+                &:hover {
+                    background-color: @odoo-navbar-inverse-link-hover-bg;
+                }
+
+                &:focus, &:active, &:focus:active {
+                    outline: none;
+                }
+            }
+        }
+
+        &.o_menu_systray {
+            float: right;
+            .open .dropdown-menu {
+                left: auto;
+                right: 0;
+            }
+            .o_user_menu {
+                float: right;
+                .oe_topbar_avatar {
+                    height: 15px;
+                }
+            }
+        }
+    }
+
+    .o_menu_brand {
+        display: none;
+    }
+
+    .open .dropdown-menu {
+        max-height: 90vh; // the dropdown should not overstep the viewport
+        overflow: auto;
+        margin-top: 0;
+
+        .o-menu-indentation(@index) when (@index < 6) {
+            > li.o_menu_header_lvl_@{index}, > li .o_menu_entry_lvl_@{index} {
+                padding-left: @odoo-dropdown-hpadding + (@index - 2)*12px;
+            }
+            .o-menu-indentation(@index + 1);
+        }
+        .o-menu-indentation(3);
+    }
+
+    @media (max-width: @screen-xs-max) {
+        .o-transition(height, 200ms, linear);
+
+        position: relative;
+        height: @odoo-navbar-height;
+        overflow: hidden;
+
+        > ul {
+            > li {
+                float: none;
+                .dropdown-backdrop {
+                    display: none;
+                }
+
+                &.open .dropdown-menu {
+                    max-height: none;
+                }
+            }
+
+            &.o_menu_sections {
+                width: 100%;
+
+                > li.open .dropdown-menu {
+                    position: static;
+                    float: none;
+                    background-color: transparent;
+                    box-shadow: none;
+                    border: none;
+                    overflow: visible;
+
+                    > li > a {
+                        background-color: transparent;
+                        color: inherit;
+                    }
+                }
+            }
+
+            &.o_menu_systray {
+                .o-position-absolute(0px, @odoo-navbar-height - 2, auto, @odoo-navbar-height - 2);
+                height: @odoo-navbar-height - 2;
+                text-align: right;
+
+                > li {
+                    display: inline-block;
+
+                    &.open .dropdown-menu {
+                        .o-position-absolute(@odoo-navbar-height, 0, 0, 0);
+                        position: fixed;
+                        width: auto;
+                    }
+                }
+
+                .o_user_menu .oe_topbar_name {
+                    display: none;
+                }
+            }
+        }
+
+        .o_menu_brand {
+            float: none;
+            margin: 0;
+            border-bottom: 1px solid @odoo-navbar-inverse-link-hover-bg;
+            color: transparent;
+        }
+    }
+}
+
+@media (max-width: @screen-xs-max) {
+    body.o_mobile_menu_opened {
+        overflow: hidden;
+        height: 100%;
+        height: 100vh;
+
+        .o_main_navbar {
+            height: 100%;
+            overflow: auto;
+        }
+    }
+}
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index f3de50cb56a..5ce50bd8f94 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -151,6 +151,8 @@
         <t t-call="web.less_helpers"/>
 
         <link rel="stylesheet" type="text/less" href="/web/static/src/less/import_bootstrap.less"/>
+        <link rel="stylesheet" type="text/less" href="/web/static/src/less/navbar.less"/> <!-- Compatibility -->
+        
         <script type="text/javascript" src="/web/static/src/js/framework/session_instance.js"></script>
     </template>
 
diff --git a/addons/website/views/website_backend_navbar.xml b/addons/website/views/website_backend_navbar.xml
index afef4c81ee9..c60caf9af36 100644
--- a/addons/website/views/website_backend_navbar.xml
+++ b/addons/website/views/website_backend_navbar.xml
@@ -1,156 +1,105 @@
 <?xml version="1.0" encoding="utf-8"?>
-<openerp>
-  <data>
+<odoo>
     <!-- Front-end/Back-end integration -->
     <template groups="base.group_user" id="user_navbar" inherit_id="website.layout">
-      <xpath expr="//body/div['id=wrawrap']" position="before">
-        <t t-if="website and menu_data">
-          <div id="website_editor_container" class="wb_hidden_xs">
-            <nav id="website_main_menu_navbar" role="navigation">
-              <ul id="oe_applications">
-                <li class="dropdown active">
-                  <a class="dropdown full hidden-xs" data-toggle="dropdown" href="#">
-                    <i class="fa fa-th-large"/> WEBSITE
-                    <b class="caret"/></a>
-                  <ul class="dropdown-menu">
-                    <li t-as="menu" t-foreach="menu_data['children']">
-                      <t t-set="debug_param" t-value="'?&amp;debug=' if debug else ''"/>
-                      <a t-att-class="'oe_menu_toggler' if menu.get('children') else 'oe_menu_leaf'" t-att-data-action-id="menu['action'] and menu['action'].split(',')[1] or ''" t-att-data-action-model="menu['action'] and menu['action'].split(',')[0] or ''" t-att-data-menu="menu['id']" t-att-href="'/web%s#menu_id=%s&amp;action=%s' % (debug_param, menu['id'], menu['action'] and menu['action'].split(',')[1] or '')">
-                        <i t-attf-class="fa #{menu.get('icon')} fa-lg fa-fw" t-if="menu.get('icon')"/>
-                        <span class="oe_menu_text">
-                          <t t-esc="menu['name']"/>
-                        </span>
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-              </ul> <!-- / #oe_applications -->
-              <ul>
-                <li class="o_menu_brand">Website</li>
-              </ul>
-              <ul id="oe_systray">
-                <!-- Mobile preview -->
-                <li class="o_mobile_preview">
-                  <a data-action="show-mobile-preview" href="#">
-                    <span title="Mobile preview">
-                      <i class="fa fa-mobile"/>
-                    </span>
-                  </a>
-                </li>
-                <!-- Promote -->
-                <li class="dropdown" groups="base.group_website_designer">
-                  <a class="dropdown-toggle waves" data-toggle="dropdown" href="#" id="promote-menu-button">
-                    <span class="title">PROMOTE</span>
-                    <span class="caret"/>
-                  </a>
-                  <ul class="dropdown-menu oe_promote_menu" role="menu">
-                    <li>
-                      <a data-action="promote-current-page" href="#">
-                        <span title="Promote page on the web">Optimize SEO</span>
-                      </a>
-                    </li>
-                    <li>
-                      <a href="https://www.adspike.com">
-                        <span title="Optimize your AdWords account">Optimize AdWords Campaign</span>
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-
-                <!-- Content -->
-                <!-- All the li  after #website_addPage_list will be automatically
-                     hidden and cloned to #website_addPage_modal  -->
-
-                <li class="dropdown content" groups="base.group_website_publisher" t-if="editable">
-                  <a id="content-menu-button" class="dropdown-toggle waves" data-toggle="dropdown" href="#">CONTENT <span class="caret"></span></a>
-                  <ul class="dropdown-menu oe_content_menu" role="menu">
-                    <li groups="base.group_website_designer">
-                      <a data-action="edit_menu" href="#"><span title="Edit Top Menu">Edit Menu</span></a>
-                    </li>
-                    <t t-if="deletable">
-                      <li>
-                        <ul>
-                          <li groups="base.group_website_designer">
-                            <a href="#" data-action="rename_page">Rename Page</a>
-                          </li>
-                          <li groups="base.group_website_designer">
-                            <a href="#" data-action="delete_page">Delete Page</a>
-                          </li>
+        <xpath expr="//body" position="attributes">
+            <attribute name="class">o_connected_user</attribute>
+        </xpath>
+        <xpath expr="//body/div['id=wrawrap']" position="before">
+            <nav t-if="website and menu_data" id="oe_main_menu_navbar" class="o_main_navbar">
+                <ul id="oe_applications">
+                    <li class="dropdown active">
+                        <a class="dropdown full" data-toggle="dropdown" href="#">
+                            <i class="fa fa-th-large"/> WEBSITE <b class="caret"/>
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li t-as="menu" t-foreach="menu_data['children']">
+                                <t t-set="debug_param" t-value="'?&amp;debug=' if debug else ''"/>
+                                <a t-att-class="'oe_menu_toggler' if menu.get('children') else 'oe_menu_leaf'" t-att-data-action-id="menu['action'] and menu['action'].split(',')[1] or ''" t-att-data-action-model="menu['action'] and menu['action'].split(',')[0] or ''" t-att-data-menu="menu['id']" t-att-href="'/web%s#menu_id=%s&amp;action=%s' % (debug_param, menu['id'], menu['action'] and menu['action'].split(',')[1] or '')">
+                                    <i t-attf-class="fa #{menu.get('icon')} fa-lg fa-fw" t-if="menu.get('icon')"/>
+                                    <span class="oe_menu_text">
+                                        <t t-esc="menu['name']"/>
+                                    </span>
+                                </a>
+                            </li>
                         </ul>
-                      </li>
-                      <li groups="base.group_website_designer"></li>
-                    </t>
-                    <li id="website_addPage_list"></li>
-                    <li groups="base.group_website_designer" class="animated" data-dismiss="modal">
-                      <a href="#" data-action="new_page">
-                        <i class="fa fa-file-o"/>
-                        <p>Empty Page</p>
-                      </a>
                     </li>
-                  </ul>
-                </li>
-                <!-- Customize -->
-                <li class="dropdown" groups="base.group_website_designer" id="customize-menu">
-                  <a class="dropdown-toggle waves" data-toggle="dropdown" href="#" id="customize-menu-button">
-                    <span class="title">CUSTOMIZE</span>
-                    <span class="caret"/>
-                  </a>
-                  <ul class="dropdown-menu" role="menu">
-                    <li id="html_editor">
-                      <a data-action="ace" href="#advanced-view-editor">HTML Editor</a>
+                </ul>
+
+                <button type="button" class="fa fa-bars pull-right visible-xs-block o_mobile_menu_toggle"/>
+
+                <div class="o_menu_brand">Website</div>
+
+                <ul class="o_menu_sections">
+                    <!-- Promote -->
+                    <li class="dropdown" groups="base.group_website_designer">
+                        <a class="dropdown-toggle waves" data-toggle="dropdown" href="#" id="promote-menu-button">Promote</a>
+                        <ul class="dropdown-menu oe_promote_menu" role="menu">
+                            <li><a data-action="promote-current-page" href="#" title="Promote page on the web">Optimize SEO</a></li>
+                            <li><a href="https://www.adspike.com" title="Optimize your AdWords account">Optimize AdWords Campaign</a></li>
+                        </ul>
                     </li>
-                    <li id="theme_customize">
-                      <a href="#">Customize Theme</a>
+                    <!-- Content -->
+                    <li class="dropdown content" groups="base.group_website_publisher" t-if="editable">
+                        <a id="content-menu-button" class="dropdown-toggle waves" data-toggle="dropdown" href="#">Content</a>
+                        <ul class="dropdown-menu oe_content_menu" role="menu">
+                            <li groups="base.group_website_designer">
+                                <a data-action="edit_menu" href="#" title="Edit Top Menu">Edit Menu</a>
+                            </li>
+                            <li t-if="deletable" groups="base.group_website_designer"><a href="#" data-action="rename_page">Rename Page</a></li>
+                            <li t-if="deletable" groups="base.group_website_designer"><a href="#" data-action="delete_page">Delete Page</a></li>
+                        </ul>
                     </li>
-                    <li id="install_apps">
-                      <a href="/web#return_label=Website&amp;action=website.action_module_website">Install Apps</a>
+                    <!-- Customize -->
+                    <li class="dropdown" groups="base.group_website_designer" id="customize-menu">
+                        <a class="dropdown-toggle waves" data-toggle="dropdown" href="#" id="customize-menu-button">Customize</a>
+                        <ul class="dropdown-menu" role="menu">
+                            <li id="html_editor"><a data-action="ace" href="#advanced-view-editor">HTML Editor</a></li>
+                            <li id="theme_customize"><a href="#">Customize Theme</a></li>
+                            <li id="install_apps"><a href="/web#return_label=Website&amp;action=website.action_module_website">Install Apps</a></li>
+                            <li class="divider"/>
+                        </ul>
                     </li>
-                    <li class="divider"/>
-                  </ul>
-                </li>
-                <!-- Help -->
-                <li class="dropdown">
-                  <a class="dropdown-toggle waves" data-toggle="dropdown" href="#" id="help-menu-button">
-                    <span class="title">HELP</span>
-                    <span class="caret"/>
-                  </a>
-                  <ul class="dropdown-menu" id="help-menu" role="menu">
-                    <li class="dropdown-header">HELP &amp; TUTORIALS</li>
-                  </ul>
-                </li>
-              </ul> <!-- / #oe_systray -->
+                    <!-- Help -->
+                    <li class="dropdown">
+                        <a class="dropdown-toggle waves" data-toggle="dropdown" href="#" id="help-menu-button">Help</a>
+                        <ul class="dropdown-menu" id="help-menu" role="menu">
+                            <li class="dropdown-header">HELP &amp; TUTORIALS</li>
+                        </ul>
+                    </li>
+                </ul>
 
-              <ul id="oe_editzone" class="right" groups="base.group_website_publisher">
-                <li groups="base.group_website_designer">
-                  <button data-action="new_page" class="btn primary full" href="#" data-toggle="modal" data-target="#website_addPage_modal">
-                    <i class="material-icons">&#xE145;</i>NEW PAGE</button>
-                </li>
-                <li t-if="not translatable">
-                  <button class="btn full accent" data-action="edit" type="button">
-                    <i class="material-icons">&#xE254;</i>EDIT PAGE</button>
-                </li>
-                <li t-if="translatable">
-                  <button class="btn full accent btn-xs" data-action="translate" type="button">TRANSLATE</button>
-                </li>
-                <li t-if="translatable">
-                  <a class="btn btn-link" data-action="edit_master" href="#">or Edit Master</a>
-                </li>
-              </ul> <!-- / #oe_editzone -->
-
-            </nav> <!-- / #website_main_menu_navbar -->
-          </div>
-        </t>
-      </xpath>
-
-      <!-- Add new page/content modal -->
-      <xpath expr="//body/div['id=wrawrap']" position="after">
-        <div class="modal" id="website_addPage_modal">
-          <div class="modal-dialog" data-dismiss="modal">
-            <ul class="website_addPage_ul"></ul>
-          </div>
-        </div>
-      </xpath>
+                <ul class="o_menu_systray">
+                    <!-- Mobile preview -->
+                    <li class="o_mobile_preview hidden-xs">
+                        <a data-action="show-mobile-preview" href="#"><span title="Mobile preview" class="fa fa-mobile"/></a>
+                    </li>
+                    <!-- Page Edition -->
+                    <li groups="base.group_website_publisher,base.group_website_designer">
+                        <a data-action="new_page" href="#" data-toggle="modal" data-target="#o_website_add_page_modal"><span class="fa fa-plus"/> NEW PAGE</a>
+                    </li>
+                    <li t-if="not translatable" groups="base.group_website_publisher">
+                        <a data-action="edit" href="#"><span class="fa fa-pencil"/> EDIT PAGE</a>
+                    </li>
+                    <li t-if="translatable" groups="base.group_website_publisher">
+                        <a data-action="translate" href="#">TRANSLATE</a>
+                    </li>
+                    <li t-if="translatable" groups="base.group_website_publisher">
+                        <a data-action="edit_master" href="#">or Edit Master</a>
+                    </li>
+                </ul>
+            </nav>
+        </xpath>
 
+        <!-- Add new page/content modal -->
+        <xpath expr="//body/div['id=wrawrap']" position="after">
+            <div class="modal" id="o_website_add_page_modal">
+                <div class="modal-dialog modal-lg" data-dismiss="modal">
+                    <ul>
+                        <li groups="base.group_website_designer"><a href="#" data-action="new_page"><i class="fa fa-file-o"/><p>New Page</p></a></li>
+                    </ul>
+                </div>
+            </div>
+        </xpath>
     </template>
-  </data>
-</openerp>
+</odoo>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index c5366eb4d5b..ed305fbf61d 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -458,8 +458,8 @@
 
 <!-- User Navbar -->
 <template id="content_new_blogpost" inherit_id="website.user_navbar" groups="base.group_website_designer">
-    <xpath expr="//ul[@id='oe_systray']/li/ul[@class='dropdown-menu oe_content_menu']" position="inside">
-         <li><a href="#" data-action="new_blog_post">New Blog Post</a></li>
+    <xpath expr="//div[@id='o_website_add_page_modal']//ul" position="inside">
+        <li><a href="#" data-action="new_blog_post"><i class="fa fa-rss"/><p>New Blog Post</p></a></li>
     </xpath>
 </template>
 
diff --git a/addons/website_event/views/website_event.xml b/addons/website_event/views/website_event.xml
index 637117e4076..f771a456fce 100644
--- a/addons/website_event/views/website_event.xml
+++ b/addons/website_event/views/website_event.xml
@@ -623,8 +623,8 @@
 
 <!-- User Navbar -->
 <template id="content_new_event" inherit_id="website.user_navbar" groups="event.group_event_manager">
-    <xpath expr="//ul[@id='oe_systray']/li/ul[@class='dropdown-menu oe_content_menu']" position="inside">
-         <li><a href="#" data-action="new_event">New Event</a></li>
+    <xpath expr="//div[@id='o_website_add_page_modal']//ul" position="inside">
+        <li><a href="#" data-action="new_event"><i class="fa fa-glass"/><p>New Event</p></a></li>
     </xpath>
 </template>
 </data>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index a0216121b0c..66902c2d2fb 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -1537,8 +1537,8 @@
 
 <!-- User Navbar -->
 <template id="content_new_forum" inherit_id="website.user_navbar" groups="base.group_user">
-    <xpath expr="//ul[@id='oe_systray']/li/ul[@class='dropdown-menu oe_content_menu']" position="inside">
-        <li><a href="#" data-action="new_forum">New Forum</a></li>
+    <xpath expr="//div[@id='o_website_add_page_modal']//ul" position="inside">
+        <li><a href="#" data-action="new_forum"><i class="fa fa-comment"/><p>New Forum</p></a></li>
     </xpath>
 </template>
 
diff --git a/addons/website_hr_recruitment/views/templates.xml b/addons/website_hr_recruitment/views/templates.xml
index 9165c7992f4..01d9f6acc30 100644
--- a/addons/website_hr_recruitment/views/templates.xml
+++ b/addons/website_hr_recruitment/views/templates.xml
@@ -294,8 +294,8 @@
 
 <!-- User Navbar -->
 <template id="content_new_job_offer" inherit_id="website.user_navbar" groups="base.group_hr_manager">
-    <xpath expr="//ul[@id='oe_systray']/li/ul[@class='dropdown-menu oe_content_menu']" position="inside">
-         <li><a href="/jobs/add" class="js_link2post">New Job Offer</a></li>
+    <xpath expr="//div[@id='o_website_add_page_modal']//ul" position="inside">
+        <li><a href="/jobs/add" class="js_link2post"><i class="fa fa-briefcase"/><p>New Job Offer</p></a></li>
     </xpath>
 </template>
 
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index e042cfd7a0b..db71fbff153 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -1471,8 +1471,8 @@
 
 <!-- User Navbar -->
 <template id="content_new_product" inherit_id="website.user_navbar" groups="base.group_sale_manager">
-    <xpath expr="//ul[@id='oe_systray']/li/ul[@class='dropdown-menu oe_content_menu']" position="inside">
-        <li><a id="create-new-product" href="#" data-action="new_product">New Product</a></li>
+    <xpath expr="//div[@id='o_website_add_page_modal']//ul" position="inside">
+        <li><a id="create-new-product" href="#" data-action="new_product"><i class="fa fa-shopping-cart"/><p>New Product</p></a></li>
     </xpath>
 </template>