diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index c078ea4af1..ba2b7d01b9 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2991,6 +2991,7 @@ button.close {
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
+ color: #999999;
text-decoration: none;
cursor: default;
background-color: transparent;
@@ -3149,6 +3150,13 @@ button.close {
background-color: #d5d5d5;
}
+.navbar .nav > .disabled > a,
+.navbar .nav > .disabled > a:hover,
+.navbar .nav > .disabled > a:focus {
+ color: #cccccc;
+ background-color: transparent;
+}
+
.navbar-static-top {
border-radius: 0;
}
@@ -3307,6 +3315,13 @@ button.close {
background-color: #080808;
}
+.navbar-inverse .nav > .disabled > a,
+.navbar-inverse .nav > .disabled > a:hover,
+.navbar-inverse .nav > .disabled > a:focus {
+ color: #444444;
+ background-color: transparent;
+}
+
.navbar-inverse .navbar-toggle {
border-color: #333;
}
diff --git a/docs/components.html b/docs/components.html
index b60dd1621a..5727a1759d 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -805,7 +805,7 @@ title: Components
@@ -813,7 +813,7 @@ title: Components
{% endhighlight %}
You can easily add dividers to your nav links with an empty list item and a simple class. Just add the appropriate class to <li>
elements between links. Dividers will be horizontal to start, but at resolutions above 768px they become vertical with the navigation.
diff --git a/less/navbar.less b/less/navbar.less
index 7c70f83a6c..7fb241c42e 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -37,6 +37,12 @@
color: @navbar-link-color-active;
background-color: @navbar-link-bg-active;
}
+ .nav > .disabled > a,
+ .nav > .disabled > a:hover,
+ .nav > .disabled > a:focus {
+ color: @navbar-link-color-disabled;
+ background-color: @navbar-link-bg-disabled;
+ }
}
@@ -210,6 +216,12 @@
color: @navbar-inverse-link-color-active;
background-color: @navbar-inverse-link-bg-active;
}
+ .nav > .disabled > a,
+ .nav > .disabled > a:hover,
+ .nav > .disabled > a:focus {
+ color: @navbar-inverse-link-color-disabled;
+ background-color: @navbar-inverse-link-bg-disabled;
+ }
// Darken the responsive nav toggle
.navbar-toggle {
diff --git a/less/navs.less b/less/navs.less
index 07d5e5c5d1..33b5ec3fe8 100644
--- a/less/navs.less
+++ b/less/navs.less
@@ -156,6 +156,7 @@
// Nuke hover effects
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
+ color: @grayLight;
text-decoration: none;
background-color: transparent;
cursor: default;
diff --git a/less/variables.less b/less/variables.less
index 2b6fa6e1bf..c9fef33913 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -189,9 +189,11 @@
// Navbar links
@navbar-link-color: #777;
@navbar-link-color-hover: #333;
-@navbar-link-color-active: #555;
@navbar-link-bg-hover: transparent;
+@navbar-link-color-active: #555;
@navbar-link-bg-active: darken(@navbar-bg, 10%);
+@navbar-link-color-disabled: #ccc;
+@navbar-link-bg-disabled: transparent;
// Inverted navbar
@navbar-inverse-text: @grayLight;
@@ -205,9 +207,11 @@
// Inverted navbar links
@navbar-inverse-link-color: @grayLight;
@navbar-inverse-link-color-hover: #fff;
-@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
@navbar-inverse-link-bg-hover: transparent;
+@navbar-inverse-link-color-active: @navbar-inverse-link-color-hover;
@navbar-inverse-link-bg-active: darken(@navbar-inverse-bg, 10%);
+@navbar-inverse-link-color-disabled: #444;
+@navbar-inverse-link-bg-disabled: transparent;
// Inverted navbar search
// Normal navbar needs no special styles or vars