Fixed dropdown links in navbar on small screens issue

build/less/dropdown.less

@@ -62,7 +62,11 @@
     background-color: #fff;
     padding: 7px 10px;
     border-bottom: 1px solid #eeeeee;
-    color: #444444;
+    color: #444!important;
+    @media (max-width: @screen-sm-max) {
+      background: #fff!important;
+      color: #444!important;
+    }
     text-align: center;
     //Hover state
     &:hover {
@@ -217,8 +221,12 @@
       border-bottom: 1px solid #f4f4f4;
       border-top: 1px solid #dddddd;
       .clearfix();
-      > div > a {
-        color: @light-blue;
+      a {
+        color: #444 !important;
+        @media (max-width: @screen-sm-max) {
+          background: #fff !important;
+          color: #444 !important;
+        }
       }
     }
 
@@ -316,7 +324,7 @@
       }
     }
   }
-@media (max-width: @screen-sm) {
+@media (max-width: @screen-sm-max) {
   .navbar-custom-menu > .navbar-nav {
     float: right;
     > li {
@@ -325,23 +333,9 @@
         position: absolute;
         right: 5%;
         left: auto;
-        border-right: 1px solid #ddd;
-        border-bottom: 1px solid #ddd;
-        border-left: 1px solid #ddd;
+        border: 1px solid #ddd;
         background: #fff;
       }
     }
   }
-}
-
-/* Fix menu positions on xs screens to appear correctly and fully */
-@media (max-width: @screen-sm) {
-  .navbar-nav  {
-    > li > .dropdown-menu {
-      /* Remove arrow from the top */
-      &:after, & > li.header:after {
-        border-width: 0px!important;
-      }
-    }
-  }
 }

build/less/header.less

@@ -44,7 +44,7 @@
     margin-right: 5px;
     float: right;
     @media (max-width: @screen-sm-max) {
-      a {
+       a {
         color: inherit;
         background: transparent;
       }

build/less/skins/skin-blue.less

@@ -2,7 +2,6 @@
  * Skin: Blue
  * ----------
  */
-
 @import "../../bootstrap-less/mixins.less";
 @import "../../bootstrap-less/variables.less";
 @import "../variables.less";
@@ -19,11 +18,11 @@
           background-color: darken(@light-blue, 5%);
         }
       }
-      @media(max-width: @screen-header-collapse) {
+      @media (max-width: @screen-header-collapse) {
         .dropdown-menu {
           li {
             &.divider {
-              background-color: rgba(255,255,255,0.1);
+              background-color: rgba(255, 255, 255, 0.1);
             }
             a {
               color: #fff;
@@ -36,10 +35,10 @@
       }
     }
     //Logo
-    .logo {      
-      .logo-variant(darken(@light-blue, 5%));      
+    .logo {
+      .logo-variant(darken(@light-blue, 5%));
     }
-    
+
     li.user-header {
       background-color: @light-blue;
     }
@@ -83,7 +82,7 @@
   }
 
   // Sidebar color (Both .wrapper and .left-side are responsible for sidebar bg color)
-  .wrapper ,
+  .wrapper,
   .main-sidebar,
   .left-side {
     background: @sidebar-dark-bg;
@@ -98,7 +97,9 @@
   // skin blue treeview-menu
   .treeview-menu {
     > li {
-      > a {color: @sidebar-dark-submenu-color;}
+      > a {
+        color: @sidebar-dark-submenu-color;
+      }
       &.active > a, > a:hover {
         color: @sidebar-dark-submenu-hover-color;
       }
@@ -116,9 +117,9 @@
       height: 35px;
       .transition(all @transition-speed @transition-fn);
     }
-    input[type="text"]{
+    input[type="text"] {
       color: #666;
-      .border-radius(2px, 0, 2px, 0)!important;
+      .border-radius(2px, 0, 2px, 0) !important;
       &:focus, &:focus + .input-group-btn .btn {
         background-color: #fff;
         color: #666;
@@ -129,10 +130,11 @@
     }
     .btn {
       color: #999;
-      .border-radius(0, 2px, 0, 2px)!important;
+      .border-radius(0, 2px, 0, 2px) !important;
     }
   }
 }
+
 .skin-blue.layout-top-nav .main-header > .logo {
   .logo-variant(@light-blue);
 }

dist/css/AdminLTE.css

@@ -625,9 +625,17 @@ a:focus {
   background-color: #fff;
   padding: 7px 10px;
   border-bottom: 1px solid #eeeeee;
-  color: #444444;
+  color: #444!important;
   text-align: center;
 }
+@media (max-width: 991px) {
+  .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
+  .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
+  .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
+    background: #fff!important;
+    color: #444!important;
+  }
+}
 .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a:hover,
 .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a:hover,
 .navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a:hover {
@@ -761,8 +769,14 @@ a:focus {
 .navbar-nav > .user-menu > .dropdown-menu > .user-body:after {
   clear: both;
 }
-.navbar-nav > .user-menu > .dropdown-menu > .user-body > div > a {
-  color: #3c8dbc;
+.navbar-nav > .user-menu > .dropdown-menu > .user-body a {
+  color: #444 !important;
+}
+@media (max-width: 991px) {
+  .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
+    background: #fff !important;
+    color: #444 !important;
+  }
 }
 .navbar-nav > .user-menu > .dropdown-menu > .user-footer {
   background-color: #f9f9f9;
@@ -853,7 +867,7 @@ a:focus {
   right: 0;
   left: auto;
 }
-@media (max-width: 768px) {
+@media (max-width: 991px) {
   .navbar-custom-menu > .navbar-nav {
     float: right;
   }
@@ -864,22 +878,10 @@ a:focus {
     position: absolute;
     right: 5%;
     left: auto;
-    border-right: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-    border-left: 1px solid #ddd;
+    border: 1px solid #ddd;
     background: #fff;
   }
 }
-/* Fix menu positions on xs screens to appear correctly and fully */
-@media (max-width: 768px) {
-  .navbar-nav > li > .dropdown-menu {
-    /* Remove arrow from the top */
-  }
-  .navbar-nav > li > .dropdown-menu:after,
-  .navbar-nav > li > .dropdown-menu > li.header:after {
-    border-width: 0px!important;
-  }
-}
 /*
  * Component: Form
  * ---------------