diff --git a/resources/www/_shared/styles/_main-menu.scss b/resources/www/_shared/styles/_main-menu.scss
index 27ebf231d7..ee135a49d1 100644
--- a/resources/www/_shared/styles/_main-menu.scss
+++ b/resources/www/_shared/styles/_main-menu.scss
@@ -34,6 +34,9 @@ $mainMenuBottomBorder: none !default;
   .desktopmenu {
     display: inline-block;
   }
+  .inline {
+    display: inline-block !important;
+  }
   .show-menu {
     display: none;
     i {
@@ -189,25 +192,79 @@ $mainMenuBottomBorder: none !default;
         }
       }
     }
-    #nav_customlink_container {
-      left: 10px;
+    #nav_menu_container {
+      top: 35px;
+      .nav_menu {
+        top: 9px;
+      }
       .arrow-up {
-        margin-left: 82px;
+        left: 62px;
         display: block;
+        position: absolute;
       }
     }
-    #nav_menu_container {
+    #nav_customlink_container {
+      display: none;
+      position: relative;
       left: 10px;
+      width: auto;
+      .nav-wrapper-box {
+        position: absolute;
+        background: #d8d8d8;
+        border-radius: 5px;
+        padding-right: 10px;
+        padding-left: 10px;
+        top: 9px;
+        .nav_menu {
+          position: relative;
+          li.menu-bar-item {
+            width: 100%;
+            left: 0;
+          }
+          li.menu-bar-item a {
+            > span {
+              padding: 0;
+              display: inline-block;
+            }
+          }
+        }
+      }
       .arrow-up {
-        margin-left: 51px;
+        left: 82px;
         display: block;
+        position: absolute;
       }
     }
     #nav_account_container {
+      position: relative;
       right: 10px;
+      width: auto;
+      .nav-wrapper-box {
+        position: absolute;
+        right: 10px;
+        background: #d8d8d8;
+        border-radius: 5px;
+        padding-right: 10px;
+        padding-left: 10px;
+        top: 9px;
+        .nav_menu {
+          position: relative;
+          li.menu-bar-item {
+            width: 100%;
+            left: 0;
+          }
+          li.menu-bar-item a {
+            > span {
+              padding: 0;
+              display: inline-block;
+            }
+          }
+        }
+      }
       .arrow-up {
-        margin-left: 147px;
+        right: 23px;
         display: block;
+        position: absolute;
       }
     }
     #nav_notification_container {
diff --git a/templates/web/common/menubar.html.twig b/templates/web/common/menubar.html.twig
index 94aed445a4..9df99b36b4 100644
--- a/templates/web/common/menubar.html.twig
+++ b/templates/web/common/menubar.html.twig
@@ -122,7 +122,9 @@
           </li>
           <div id="nav_customlink_container" class="desktopmenu">
               <div class="arrow-up"></div>
-              <ol class="nav_menu"></ol>
+              <div class="nav-wrapper-box">
+                  <ol class="nav_menu"></ol>
+              </div>
           </div>
           <div id="nav_notification_container">
               {% if app.getAuthenticator().isAuthenticated()  and module == "prod" %}
@@ -203,65 +205,68 @@
         </ol>
     </div>
 
-    <div class="PNB right mobilemenu" id="nav_account_container" style="left:auto;overflow:hidden;">
+    <div class="PNB right mobilemenu" id="nav_account_container">
         <div class="arrow-up"></div>
-        <ol class="nav_menu">
+        <div class="nav-wrapper-box">
+            <ol class="nav_menu">
 
-            <li class="menu-bar-item">
-                {% if app.getAuthenticator().isAuthenticated() %}
-                    {% if app.getAuthenticatedUser().isGuest %}
-                        <img src="/assets/common/images/icons/menu-name-user.png"/>
-                        <span>
-                {{ 'Guest' | trans }}
-              </span>
-                    {% else %}
-                        <a target="_blank" href="{{ path('account') }}" title="{{ 'login:: Mon compte' | trans }}">
+                <li class="menu-bar-item">
+                    {% if app.getAuthenticator().isAuthenticated() %}
+                        {% if app.getAuthenticatedUser().isGuest %}
                             <img src="/assets/common/images/icons/menu-name-user.png"/>
                             <span>
+                {{ 'Guest' | trans }}
+              </span>
+                        {% else %}
+                            <a target="_blank" href="{{ path('account') }}" title="{{ 'login:: Mon compte' | trans }}">
+                                <img src="/assets/common/images/icons/menu-name-user.png"/>
+                                <span>
                   {{ app.getAuthenticatedUser().getDisplayName() }}
+                </span>
+                            </a>
+                        {% endif %}
+                    {% endif %}
+                </li>
+                <li class="menu-bar-item">
+                    {% if app.getAuthenticator().isAuthenticated() %}
+                        <a href="{{ path('logout', { 'redirect' : '..' ~ app['request'].getPathInfo() }) }}"
+                           target="_self">
+                            <img src="/assets/common/images/icons/menu-logout.png"/>
+                            <span>
+                  {{ 'phraseanet:: deconnection' | trans }}
                 </span>
                         </a>
                     {% endif %}
-                {% endif %}
-            </li>
-            <li class="menu-bar-item">
-                {% if app.getAuthenticator().isAuthenticated() %}
-                    <a href="{{ path('logout', { 'redirect' : '..' ~ app['request'].getPathInfo() }) }}" target="_self">
-                        <img src="/assets/common/images/icons/menu-logout.png"/>
+                </li>
+                <li class="menu-bar-item">
+                    <a target="_blank" href="https://docs.phraseanet.com/4.0/">
+                        <img src="/assets/common/images/icons/menu-help.png"/>
                         <span>
-                  {{ 'phraseanet:: deconnection' | trans }}
-                </span>
-                    </a>
-                {% endif %}
-            </li>
-            <li class="menu-bar-item">
-                <a target="_blank" href="https://docs.phraseanet.com/4.0/">
-                    <img src="/assets/common/images/icons/menu-help.png"/>
-                    <span>
               {{ 'phraseanet:: aide' | trans }}
-                        <span style="display:inline-block;cursor:pointer;padding:0;border:none;padding-right:4px;padding-left:4px;"
-                              id="help-trigger"></span>
+                            <span style="display:inline-block;cursor:pointer;padding:0;border:none;padding-right:4px;padding-left:4px;"
+                                  id="help-trigger"></span>
             </span>
-                </a>
-            </li>
-            {% if module is defined and module == "prod" %}
+                    </a>
+                </li>
+                {% if module is defined and module == "prod" %}
+                    <li class="menu-bar-item">
+                        <a href="#">
+                            <img src="/assets/common/images/icons/menu-help.png"/>
+                            <span style="" class="shortcuts-trigger">
+                        {{ 'phraseanet:: raccourcis clavier' | trans }}
+                    </span>
+                        </a>
+                    </li>
+                {% endif %}
                 <li class="menu-bar-item">
                     <a href="#">
                         <img src="/assets/common/images/icons/menu-help.png"/>
-                        <span style="" class="shortcuts-trigger">
-                        {{ 'phraseanet:: raccourcis clavier' | trans }}
-                    </span>
+                        <span style="" class="infoDialog"
+                              infos="<div><span style='font-size:18px;'>PHRASEANET</span> {{ app['phraseanet.version'].getName() }} (V{{ app['phraseanet.version'].getNumber() }})</div><div></div><br/><div><a href='http://www.gnu.org/licenses/gpl.html' target='_blank'><img src='http://www.gnu.org/graphics/gplv3-88x31.png' style='vertical-align:middle;'/><span>License GNU GPL v3</span></a></div><br/><div><a href='http://www.phraseanet.com/' target='_blank'>  &copy; Copyright Alchemy 2005-{{ "now"|date("Y") }}</a><p style='margin-top: 10px' ><a href='../../gitlog.txt' target='_blank'>gitlog</a></p></div>">{{ 'phraseanet:: a propos' | trans }}</span>
                     </a>
                 </li>
-            {% endif %}
-            <li class="menu-bar-item">
-                <a href="#">
-                    <img src="/assets/common/images/icons/menu-help.png"/>
-                    <span style="" class="infoDialog"
-                          infos="<div><span style='font-size:18px;'>PHRASEANET</span> {{ app['phraseanet.version'].getName() }} (V{{ app['phraseanet.version'].getNumber() }})</div><div></div><br/><div><a href='http://www.gnu.org/licenses/gpl.html' target='_blank'><img src='http://www.gnu.org/graphics/gplv3-88x31.png' style='vertical-align:middle;'/><span>License GNU GPL v3</span></a></div><br/><div><a href='http://www.phraseanet.com/' target='_blank'>  &copy; Copyright Alchemy 2005-{{ "now"|date("Y") }}</a><p style='margin-top: 10px' ><a href='../../gitlog.txt' target='_blank'>gitlog</a></p></div>">{{ 'phraseanet:: a propos' | trans }}</span>
-                </a>
-            </li>
-        </ol>
+            </ol>
+        </div>
     </div>
 </div>
 
@@ -360,6 +365,7 @@
                 }
                 if ($('#nav_customlink_container').is(":hidden")) {
                     $('#nav_customlink_container').show();
+                    $('#nav_customlink_container').addClass('inline');
                 }
                 if ($('#nav_account_container').is(":visible")) {
                     $('#nav_account_container').hide();
@@ -371,6 +377,7 @@
                 if ($('#nav_menu_container').is(":visible")) {
                     $('#nav_menu_container').hide();
                 }
+                $('#nav_customlink_container').removeClass('inline');
 
             }
         });