Fixed dropdown links in navbar on small screens issue

pull/247/head
Abdullah Almsaeed 2015-02-20 13:53:11 -05:00
parent cab4b05331
commit e1fd521e38
5 changed files with 47 additions and 49 deletions

View File

@ -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;
}
}
}
}

View File

@ -2,7 +2,6 @@
* Skin: Blue
* ----------
*/
@import "../../bootstrap-less/mixins.less";
@import "../../bootstrap-less/variables.less";
@import "../variables.less";
@ -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;
}
@ -133,6 +134,7 @@
}
}
}
.skin-blue.layout-top-nav .main-header > .logo {
.logo-variant(@light-blue);
}

36
dist/css/AdminLTE.css vendored
View File

@ -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
* ---------------

File diff suppressed because one or more lines are too long