Index: app/views/layouts/base.html.erb
===================================================================
--- app/views/layouts/base.html.erb	(revision 18549)
+++ app/views/layouts/base.html.erb	(working copy)
@@ -60,46 +60,75 @@
 
 <div id="wrapper2">
 <div id="wrapper3">
-<div id="top-menu">
-    <div id="account">
-        <%= render_menu :account_menu -%>
-    </div>
-    <%= content_tag('div', "#{l(:label_logged_as)} #{link_to_user(User.current, :format => :username)}".html_safe, :id => 'loggedas') if User.current.logged? %>
+<nav id="top-menu">
+  <nav class="general-menu">
     <%= render_menu :top_menu if User.current.logged? || !Setting.login_required? -%>
-</div>
+  </nav>
+  <nav class="profile-menu">
+    <ul class="nav-list">
+      <% if User.current.logged? || !Setting.login_required? %>
+        <li class="nav-item">
+          <div id="quick-search">
+              <%= form_tag({:controller => 'search', :action => 'index', :id => @project}, :method => :get ) do %>
+              <%= hidden_field_tag 'scope', default_search_project_scope, :id => nil %>
+              <%= hidden_field_tag(controller.default_search_scope, 1, :id => nil) if controller.default_search_scope %>
+              <label for='q'>
+                <%= link_to l(:label_search), {:controller => 'search', :action => 'index', :id => @project, :scope => default_search_project_scope}, :accesskey => accesskey(:search) %>:
+              </label>
+              <%= text_field_tag 'q', @question, :size => 20, :class => 'small', :accesskey => accesskey(:quick_search),
+                                  :data => {
+                                      :auto_complete => true,
+                                      :issues_url => auto_complete_issues_path(:q => '')
+                                  } %>
+              <% end %>
+          </div>
+        </li>
+        <li class="nav-item">
+          <%= render_project_jump_box %>
+        </li>
+      <% end %>
+      <% if User.current.logged? %>
+        <li class="nav-item avatar-menu drdn">
+          <a href="#" class="drdn-trigger" onclick="toggleNewObjectDropdown(); return false;">
+            <%= Setting.gravatar_enabled? ? avatar(User.current, :size => '22') : User.current.login.to_s %>
+            <span class="icon-only icon-expended" ></span>
+          </a>
+          <div class="drdn-content">
+            <div class="drdn-items">
+              <ul id="loggedas"><li>
+                  <span class="name"><%= User.current.name %></span>
+                  <%= link_to("@" + User.current.login, user_url(User.current)) %>
+              </li></ul>
+              <span class="divider"></span>
+              <%= render_menu(:account_menu, nil, :class => 'account-menu') -%>
+            </div>
+          </div>
+        </li>
+        <% else %>
+        <li class="nav-item">
+          <div id="account">
+            <%= render_menu :account_menu -%>
+          </div>
+        </li
+      <% end %>
+     </ul>
+  </nav>
+</nav>
 
 <div id="header">
 
     <a href="#" class="mobile-toggle-button js-flyout-menu-toggle-button"></a>
 
-    <% if User.current.logged? || !Setting.login_required? %>
-    <div id="quick-search">
-        <%= form_tag({:controller => 'search', :action => 'index', :id => @project}, :method => :get ) do %>
-        <%= hidden_field_tag 'scope', default_search_project_scope, :id => nil %>
-        <%= hidden_field_tag(controller.default_search_scope, 1, :id => nil) if controller.default_search_scope %>
-        <label for='q'>
-          <%= link_to l(:label_search), {:controller => 'search', :action => 'index', :id => @project, :scope => default_search_project_scope}, :accesskey => accesskey(:search) %>:
-        </label>
-        <%= text_field_tag 'q', @question, :size => 20, :class => 'small', :accesskey => accesskey(:quick_search),
-                            :data => {
-                                :auto_complete => true,
-                                :issues_url => auto_complete_issues_path(:q => '')
-                            } %>
-        <% end %>
-        <%= render_project_jump_box %>
-    </div>
-    <% end %>
-
     <h1><%= page_header_title %></h1>
 
     <% if display_main_menu?(@project) %>
-    <div id="main-menu" class="tabs">
+    <nav id="main-menu" class="tabs">
         <%= render_main_menu(@project) %>
         <div class="tabs-buttons" style="display:none;">
             <button class="tab-left" onclick="moveTabLeft(this); return false;"></button>
             <button class="tab-right" onclick="moveTabRight(this); return false;"></button>
         </div>
-    </div>
+    </nav>
     <% end %>
 </div>
 
Index: lib/redmine/menu_manager.rb
===================================================================
--- lib/redmine/menu_manager.rb	(revision 18549)
+++ lib/redmine/menu_manager.rb	(working copy)
@@ -110,12 +110,14 @@
         menu_name.present? && Redmine::MenuManager.items(menu_name).children.present?
       end
 
-      def render_menu(menu, project=nil)
+      def render_menu(menu, project=nil, options={})
         links = []
         menu_items_for(menu, project) do |node|
           links << render_menu_node(node, project)
         end
-        links.empty? ? nil : content_tag('ul', links.join.html_safe)
+        default_options = {:class => 'nav-list'}
+        options = default_options.merge(options)
+        links.empty? ? nil : content_tag('ul', links.join.html_safe, options)
       end
 
       def render_menu_node(node, project=nil)
@@ -124,7 +126,7 @@
         else
           caption, url, selected = extract_node_details(node, project)
           return content_tag('li',
-                               render_single_menu_node(node, caption, url, selected))
+                               render_single_menu_node(node, caption, url, selected), :class => 'nav-item')
         end
       end
 
@@ -132,7 +134,7 @@
         caption, url, selected = extract_node_details(node, project)
 
         html = [].tap do |html|
-          html << '<li>'
+          html << '<li class="nav-item">'
           # Parent
           html << render_single_menu_node(node, caption, url, selected)
 
Index: public/javascripts/application.js
===================================================================
--- public/javascripts/application.js	(revision 18549)
+++ public/javascripts/application.js	(working copy)
@@ -892,8 +892,8 @@
   $('input[data-disables], input[data-enables], input[data-shows]').each(toggleDisabledOnChange);
 }
 
-function toggleNewObjectDropdown() {
-  var dropdown = $('#new-object + ul.menu-children');
+function toggleNewObjectDropdown(element) {
+  var dropdown = $(element).next('.menu-children');
   if(dropdown.hasClass('visible')){
     dropdown.removeClass('visible');
   }else{
Index: public/stylesheets/application.css
===================================================================
--- public/stylesheets/application.css	(revision 18549)
+++ public/stylesheets/application.css	(working copy)
@@ -15,44 +15,77 @@
 #wrapper {background: white;overflow: hidden;}
 #wrapper3 { display: flex; flex-direction: column; }
 
-#top-menu {background: #3E5B76; color: #fff; height:1.8em; font-size: 0.8em; padding: 2px 2px 0px 6px;}
-#top-menu ul {margin: 0;  padding: 0;}
-#top-menu li {
-  float:left;
-  list-style-type:none;
-  margin: 0px 0px 0px 0px;
-  padding: 0px 0px 0px 0px;
-  white-space:nowrap;
+#top-menu *, *::before, *::after {
+  box-sizing: border-box;
 }
-#top-menu a {color: #fff; margin-right: 8px; font-weight: bold;}
-#top-menu #loggedas { float: right; margin-right: 0.5em; color: #fff; }
-
-#account {float:right;}
-
-#header {min-height:5.3em;margin:0;background-color:#628DB6;color:#f8f8f8; padding: 4px 8px 20px 6px; position:relative;}
+#top-menu {background: #3E5B76; padding: 0px 6px 0px 6px; display: flex; font-size: 0.9em;}
+#top-menu > nav {
+  line-height: 24px;
+  padding: 6px 0 6px 0;
+}
+#top-menu .general-menu {
+  align-items: stretch;
+  flex: 1 1 auto;
+}
+#top-menu .profile-menu {
+  flex: 0 0 auto;
+  border-top: 0;
+}
+#top-menu ul.nav-list > li.nav-item {
+  margin-right: 8px;
+}
+#top-menu ul.nav-list > li.nav-item:last-child {
+  margin-right: 0;
+}
+#top-menu ul.nav-list li.nav-item > a {
+  color: #fff;
+}
+#top-menu .profile-menu li.avatar-menu .drdn-content {
+  padding-top: 5px;
+}
+#top-menu .profile-menu li.avatar-menu li {
+  flex-direction: column;
+}
+#top-menu .profile-menu li.avatar-menu li a {
+  width: 100%;
+  display: block;
+  padding: 4px;
+}
+#top-menu .profile-menu li.avatar-menu:hover > a {
+  text-decoration: none;
+}
+#top-menu .profile-menu li.avatar-menu img.gravatar {
+  border: 1px solid #dfdfdf;
+  margin-right: 4px;
+}
+#top-menu .profile-menu li.avatar-menu:hover img.gravatar {
+  border: 1px solid #fff;
+}
+#top-menu .profile-menu li.avatar-menu ul {
+  padding: 0;
+  min-width: 200px;
+}
+#loggedas span.name {
+  font-weight: 600;
+  padding: 4px;
+}
+#loggedas span.login {
+  display: block;
+}
+#header {min-height:5.3em;margin:0;background-color:#628DB6;color:#f8f8f8; padding: 4px 8px 0 6px;}
 #header a {color:#f8f8f8;}
 #header h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
 #header h1 .breadcrumbs { display:block; font-size: .5em; font-weight: normal; }
 
-#quick-search {float:right;}
-#quick-search #q {width:130px; height:24px; box-sizing:border-box; vertical-align:middle; border:1px solid #ccc; border-radius:3px;}
+#quick-search label, #quick-search label a {color: #fff;}
+#quick-search #q {width:130px; height:24px;}
 
-#main-menu {position: absolute;  bottom: 0px;  left:6px; margin-right: -500px; width: 100%;}
-#main-menu ul {margin: 0;  padding: 0; width: 100%; white-space: nowrap;}
-#main-menu li {
-  float:none;
-  list-style-type:none;
-  margin: 0px 2px 0px 0px;
-  padding: 0px 0px 0px 0px;
-  white-space:nowrap;
-  display:inline-block;
-}
-#main-menu li a {
-  display: block;
+#main-menu {margin-right: -500px; width: 100%;}
+#main-menu li.nav-item a {
   color: #fff;
   text-decoration: none;
   font-weight: bold;
-  margin: 0;
+  display: block;
   padding: 4px 10px 4px 10px;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
@@ -149,6 +182,24 @@
 
 a#toggle-completed-versions {color:#999;}
 
+/***** Navigation *****/
+nav ul.nav-list {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+}
+nav ul.nav-list li.nav-item {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+}
+nav ul.nav-list li.nav-item > a {
+  padding: 4px;
+}
 /***** Dropdown *****/
 .drdn {position:relative;}
 .drdn-trigger {
@@ -165,14 +216,22 @@
   display:none;
   position:absolute;
   right:0px;
-  top:25px;
+  top:28px;
   min-width:100px;
   background-color:#fff;
   border:1px solid #ccc;
-  border-radius:4px;
+  border-radius:3px;
   color:#555;
   z-index:99;
+  overflow: hidden;
 }
+.drdn-content .divider {
+  height: 1px;
+  background-color: #ccc;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
 .drdn.expanded .drdn-content {display:block;}
 
 .drdn-content .quick-search {margin:8px;}
@@ -182,7 +241,6 @@
 div + .drdn-items {border-top:1px solid #ccc;}
 .drdn-items>* {
   display:block;
-  border:1px solid #fff;
   overflow:hidden;
   text-overflow: ellipsis;
   white-space:nowrap;
@@ -207,7 +265,6 @@
   border: none;
 }
 .drdn-items>span {color:#999;}
-
 .contextual .drdn-content {top:18px;}
 .contextual .drdn-items {padding:2px;}
 .contextual .drdn-items>a:hover {color:#2A5685; border:1px solid #628db6; background-color:#eef5fd; border-radius:3px;}
@@ -216,11 +273,11 @@
 #project-jump .drdn-trigger {
   width:100%;
   height:24px;
+  line-height: 16px;
   display:inline-block;
   padding:3px 18px 3px 6px;
   border-radius:3px;
   border:1px solid #ccc;
-  margin:0 !important;
   vertical-align:middle;
   color:#555;
   background:#fff url(../images/arrow_down.png) no-repeat 97% 50%;
@@ -227,8 +284,8 @@
 }
 #project-jump .drdn.expanded .drdn-trigger {background-image:url(../images/arrow_up.png);}
 #project-jump .drdn-content {width:280px;}
-#project-jump .drdn-items>* {color:#555 !important;}
-#project-jump .drdn-items>a:hover {background-color:#759FCF; color:#fff !important;}
+#project-jump .drdn-items>*, .avatar-menu .drdn-items * {color:#555 !important;}
+#project-jump .drdn-items>a:hover, .avatar-menu .drdn-items a:hover {background-color:#759FCF; color:#fff !important; text-decoration: none;}
 
 /***** Tables *****/
 table.list, .table-list { border: 1px solid #e4e4e4; width: 100%; margin-bottom: 4px; border-radius: 3px; border-spacing: 0; overflow: hidden;}