Dropdown style.

uiframework/misago/css/flavor/navbar.less

@@ -6,4 +6,50 @@
   .navbar-brand {
     font-size: @font-size-large * 1.6;
   }
+
+  .navbar-nav-user {
+    .user-toggle {
+      overflow: auto;
+
+      img {
+        border-radius: @border-radius-base;
+        height: 32px;
+      }
+    }
+  }
+}
+
+/* On big displays */
+@media (min-width: @screen-sm-min) {
+  .navbar-nav-user {
+    .user-toggle {
+      color: @text-color;
+
+      img {
+        float: right;
+        height: 32px;
+        margin: -6px 0px;
+        margin-left: 8px;
+      }
+    }
+
+    .dropdown-menu {
+      border: none;
+      border-radius: @border-radius-base !important;
+      box-shadow: 0px 0px 0px 6px @dropdown-shadow;
+
+      &:after {
+        border: solid transparent;
+        border-bottom-color: @dropdown-bg;
+        border-width: 6px;
+        content: "";
+        height: 0;
+        position: absolute;
+        pointer-events: none;
+        right: 26px;
+        top: -11px;
+        width: 0;
+      }
+    }
+  }
 }

uiframework/misago/css/flavor/variables.less

@@ -47,6 +47,12 @@
 @navbar-primary-link-active-bg:            @brand-primary;
 @navbar-primary-link-active-border:        @brand-primary;
 
+@navbar-default-link-color:                #7f8c8d;
+@navbar-default-link-hover-color:          @brand-primary;
+@navbar-default-link-hover-bg:             transparent;
+@navbar-default-link-active-color:         @brand-primary;
+@navbar-default-link-active-bg:            transparent;
+
 // Sign in button
 @btn-signin-color:                 lighten(desaturate(@brand-primary, 45%), 5%);
 @btn-signin-bg:                    transparent;
@@ -73,8 +79,26 @@
 @btn-register-active-bg:             darken(#d35400, 5%);
 @btn-register-active-border:         darken(#d35400, 5%);
 
-
 // Navbar brand label
-
 @navbar-default-brand-color:               @text-color;
 @navbar-default-brand-hover-color:         @text-color;
+
+
+//== Dropdowns
+//
+//## Custom navbar flavor
+
+//** Dropdown link text color.
+@dropdown-link-color:            lighten(@text-color, 10%);
+//** Hover color for dropdown links.
+@dropdown-link-hover-color:      @body-bg;
+//** Hover background for dropdown links.
+@dropdown-link-hover-bg:         @brand-primary;
+
+//** Active dropdown menu item text color.
+@dropdown-link-active-color:     @body-bg;
+//** Active dropdown menu item background color.
+@dropdown-link-active-bg:        #34495e;
+
+//** Open dropdown shadow color.
+@dropdown-shadow:                fadeOut(#333, 50%);

uiframework/misago/css/misago/navbar.less

@@ -64,7 +64,7 @@
 }
 
 
-/* Navbar Nav */
+/* Navbar Primary Nav */
 .navbar-nav-primary {
   li {
     a {
@@ -75,12 +75,19 @@
 
 /* Responsiveness */
 @media (min-width: @screen-sm-min) {
+  ul.navbar-nav-user {
+    &>li {
+      }
+  }
+
   ul.navbar-nav-primary {
+    margin-top: 7px;
+
     &>li {
+      margin-left: 4px;
+
       &>a {
         border-radius: @border-radius-base;
-        margin-top: 7px;
-        margin-left: 4px;
         padding: 6px 0px;
         width: 36px;
 
@@ -114,3 +121,20 @@
     }
   }
 }
+
+
+/* Navbar User Nav */
+.navbar-nav-user {
+  &>li {
+    &>a {
+      font-size: @font-size-large;
+    }
+  }
+}
+
+/* Responsiveness */
+@media (min-width: @screen-sm-min) {
+  .navbar-nav-user {
+    margin-left: @line-height-computed * 2;
+  }
+}

uiframework/misago/css/style.css

@@ -3034,22 +3034,22 @@ input[type="button"].btn-block {
   clear: both;
   font-weight: normal;
   line-height: 1.42857143;
-  color: #333333;
+  color: #3e5771;
   white-space: nowrap;
 }
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus {
   text-decoration: none;
-  color: #262626;
-  background-color: #f5f5f5;
+  color: #fcfcfc;
+  background-color: #3498db;
 }
 .dropdown-menu > .active > a,
 .dropdown-menu > .active > a:hover,
 .dropdown-menu > .active > a:focus {
-  color: #ffffff;
+  color: #fcfcfc;
   text-decoration: none;
   outline: 0;
-  background-color: #3498db;
+  background-color: #34495e;
 }
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
@@ -3944,18 +3944,18 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   color: #2c3e50;
 }
 .navbar-default .navbar-nav > li > a {
-  color: #777777;
+  color: #7f8c8d;
 }
 .navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus {
-  color: #333333;
+  color: #3498db;
   background-color: transparent;
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
 .navbar-default .navbar-nav > .active > a:focus {
-  color: #555555;
-  background-color: #d9e1e3;
+  color: #3498db;
+  background-color: transparent;
 }
 .navbar-default .navbar-nav > .disabled > a,
 .navbar-default .navbar-nav > .disabled > a:hover,
@@ -3980,23 +3980,23 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-default .navbar-nav > .open > a,
 .navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus {
-  background-color: #d9e1e3;
-  color: #555555;
+  background-color: transparent;
+  color: #3498db;
 }
 @media (max-width: 767px) {
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-    color: #777777;
+    color: #7f8c8d;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #333333;
+    color: #3498db;
     background-color: transparent;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
-    color: #555555;
-    background-color: #d9e1e3;
+    color: #3498db;
+    background-color: transparent;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
@@ -4006,10 +4006,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   }
 }
 .navbar-default .navbar-link {
-  color: #777777;
+  color: #7f8c8d;
 }
 .navbar-default .navbar-link:hover {
-  color: #333333;
+  color: #3498db;
 }
 .navbar-inverse {
   background-color: #222222;
@@ -5821,16 +5821,20 @@ button.close {
     margin-left: 40px;
   }
 }
-/* Navbar Nav */
+/* Navbar Primary Nav */
 .navbar-nav-primary li a {
   font-size: 18px;
 }
 /* Responsiveness */
 @media (min-width: 768px) {
-  ul.navbar-nav-primary > li > a {
-    border-radius: 4px;
+  ul.navbar-nav-primary {
     margin-top: 7px;
+  }
+  ul.navbar-nav-primary > li {
     margin-left: 4px;
+  }
+  ul.navbar-nav-primary > li > a {
+    border-radius: 4px;
     padding: 6px 0px;
     width: 36px;
     text-align: center;
@@ -5855,6 +5859,16 @@ button.close {
     color: #fcfcfc !important;
   }
 }
+/* Navbar User Nav */
+.navbar-nav-user > li > a {
+  font-size: 18px;
+}
+/* Responsiveness */
+@media (min-width: 768px) {
+  .navbar-nav-user {
+    margin-left: 40px;
+  }
+}
 .misago-branding a {
   display: inline-block;
   margin-top: 30px;
@@ -5916,6 +5930,42 @@ button.close {
 .navbar-default .navbar-brand {
   font-size: 28.8px;
 }
+.navbar-default .navbar-nav-user .user-toggle {
+  overflow: auto;
+}
+.navbar-default .navbar-nav-user .user-toggle img {
+  border-radius: 4px;
+  height: 32px;
+}
+/* On big displays */
+@media (min-width: 768px) {
+  .navbar-nav-user .user-toggle {
+    color: #2c3e50;
+  }
+  .navbar-nav-user .user-toggle img {
+    float: right;
+    height: 32px;
+    margin: -6px 0px;
+    margin-left: 8px;
+  }
+  .navbar-nav-user .dropdown-menu {
+    border: none;
+    border-radius: 4px !important;
+    box-shadow: 0px 0px 0px 6px rgba(51, 51, 51, 0.5);
+  }
+  .navbar-nav-user .dropdown-menu:after {
+    border: solid transparent;
+    border-bottom-color: #ffffff;
+    border-width: 6px;
+    content: "";
+    height: 0;
+    position: absolute;
+    pointer-events: none;
+    right: 26px;
+    top: -11px;
+    width: 0;
+  }
+}
 .jumbotron {
   margin-top: -20px;
 }

uiframework/navbar.html

@@ -41,12 +41,20 @@
             <a href="#" class="btn btn-sign-in navbar-btn">Sign in</a>
             <a href="#" class="btn btn-register navbar-btn">Register</a>
           </div>
-          <ul class="nav navbar-nav navbar-nav-secondary navbar-right">
+          <ul class="nav navbar-nav navbar-nav-user navbar-right">
             <li class="dropdown">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Username <b class="caret"></b></a>
+              <a href="#" class="dropdown-toggle user-toggle" data-toggle="dropdown">
+                <img src="http://www.gravatar.com/avatar/6f5c4a1986259cb1e5ba64b3d94b50b7?s=125" alt="Your avatar">
+                rafalp
+              </a>
               <ul class="dropdown-menu">
                 <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
+                <li>
+                  <a href="#">
+                    <span class="badge pull-right">42</span>
+                    Another action
+                  </a>
+                </li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
                 <li><a href="#">Separated link</a></li>