-
+
+
What is it
Our topbar is a fixed bar that houses a website's logo or name, primary navigation, and search form.
+
+
Customizable
+
All elements within, and the entire topbar as well, are optional. You can choose to include a logo/name, nav, search, and a secondary nav—or any combination of that.
+
-
All elements are optional in the topbar, as is the entire topbar. Contents are configurable in that you can have a logo, nav, search, and a secondary nav—or any combination of that.
+
Dropdowns included
+
As part of the main navigation, we've included the ability for you to add dropdowns to your nav. Check out the secondary nav above (right aligned) to see how it's done.
diff --git a/less/baseline.css b/less/baseline.css
index f20b5c674c..3feb91a104 100644
--- a/less/baseline.css
+++ b/less/baseline.css
@@ -150,8 +150,8 @@ table.zebra-striped th.headerSortUp.purple,table.zebra-striped th.headerSortDown
div.topbar{background-color:#222222;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, left bottom, from(#333333), to(#222222));background-image:-webkit-linear-gradient(#333333, #222222);background-image:-moz-linear-gradient(#333333, #222222);background-image:-o-linear-gradient(top, #333333, #222222);background-image:-khtml-gradient(linear, left top, left bottom, from(#333333), to(#222222));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#333333', EndColorStr='#222222', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#222222', GradientType=0))";height:40px;position:fixed;top:0;left:0;right:0;z-index:100;overflow:visible;-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);box-shadow:0 1px 3px rgba(0, 0, 0, 0.25),inset 0 -1px 0 rgba(0, 0, 0, 0.1);}div.topbar a{color:#777777;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);-webkit-transition:all linear 0.1s;-moz-transition:all linear 0.1s;transition:all linear 0.1s;}
div.topbar ul li a:hover,div.topbar ul li.active a,div.topbar a.logo:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.15);color:#ffffff;text-decoration:none;}
div.topbar a.logo{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;}div.topbar a.logo img{display:inline;float:left;margin-right:6px;}
-div.topbar form{float:left;margin:4px 0 0 0;opacity:1;position:relative;}div.topbar form input{background-color:#777777;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#fff;}
-div.topbar form input::-webkit-input-placeholder{color:#fff;}
+div.topbar form{float:left;margin:4px 0 0 0;opacity:1;position:relative;}div.topbar form input{background-color:#777777;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;width:220px;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;transition:none;}div.topbar form input:-moz-placeholder{color:#cccccc;}
+div.topbar form input::-webkit-input-placeholder{color:#cccccc;}
div.topbar form input:hover{background-color:#444;background-color:rgba(255, 255, 255, 0.5);color:#fff;}
div.topbar form input:focus,div.topbar form input.focused{outline:none;background-color:#fff;color:#333333;text-shadow:0 1px 0 #fff;border:0;padding:5px 10px;-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.15);box-shadow:0 0 3px rgba(0, 0, 0, 0.15);}
div.topbar ul{display:block;float:left;margin:0 10px 0 0;}div.topbar ul.secondary-nav{float:right;margin-left:10px;margin-right:0;}
@@ -160,8 +160,8 @@ div.topbar ul li.active a{background-color:#222;background-color:rgba(0, 0, 0, 0
div.topbar ul li.vr{border-left:1px solid #008db8;border-right:1px solid #00a0d1;height:26px;margin:6px 3px 1px 3px;}
div.topbar ul.primary-nav li ul{left:0;}
div.topbar ul.secondary-nav li ul{right:0;}
-div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu span.menu-label:after{width:7px;height:7px;display:inline-block;background:transparent url(/images/sprite-icons.png) no-repeat scroll -79px -100px;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;opacity:.5;}
-div.topbar ul li.menu.open a.menu,div.topbar ul li.menu.open a:hover{background-color:#00b4eb;background-color:rgba(255, 255, 255, 0.1);}
+div.topbar ul li.menu{position:relative;}div.topbar ul li.menu a.menu:after{width:7px;height:7px;display:inline-block;background:transparent url(../img/dropdown-arrow.gif) no-repeat top center;content:"↓";text-indent:-99999px;vertical-align:top;margin-top:8px;margin-left:4px;opacity:.5;}
+div.topbar ul li.menu.open a.menu,div.topbar ul li.menu.open a:hover{background-color:#00b4eb;background-color:rgba(255, 255, 255, 0.1);color:#fff;}
div.topbar ul li.menu.open ul{display:block;}div.topbar ul li.menu.open ul li a{background-color:transparent;font-weight:normal;}div.topbar ul li.menu.open ul li a:hover{background-color:rgba(255, 255, 255, 0.1);color:#fff;}
div.topbar ul li.menu.open ul li.active a{background-color:rgba(255, 255, 255, 0.1);font-weight:bold;}
div.topbar ul li ul{background-color:#333;float:left;display:none;position:absolute;top:40px;min-width:160px;max-width:220px;_width:160px;margin-left:0;margin-right:0;padding:0;text-align:left;border:0;zoom:1;-moz-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);box-shadow:0 1px 2px rgba(0, 0, 0, 0.6);}div.topbar ul li ul li{float:none;clear:both;display:block;background:none;font-size:12px;}div.topbar ul li ul li a{display:block;padding:6px 15px;clear:both;font-weight:normal;line-height:19px;color:#bbb;}div.topbar ul li ul li a:hover{background-color:#333;background-color:rgba(255, 255, 255, 0.25);color:#fff;}
@@ -196,7 +196,7 @@ div.well{background:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;bord
body{background-color:#ffffff;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), color-stop(0.15, #ffffff), to(#ffffff));background-image:-webkit-linear-gradient(#eeeeee, color-stop(0.15, #ffffff), #ffffff);background-image:-moz-linear-gradient(#eeeeee, color-stop(#ffffff, 0.15), #ffffff);background-attachment:fixed;background-position:0 40px;position:relative;}
header,section,footer,article,aside{display:block;}
section{padding-top:80px;margin-bottom:-40px;}
-#masthead,#footer{background-color:#049cd9;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, left bottom, from(#005cbd), to(#049cd9));background-image:-webkit-linear-gradient(#005cbd, #049cd9);background-image:-moz-linear-gradient(#005cbd, #049cd9);background-image:-o-linear-gradient(top, #005cbd, #049cd9);background-image:-khtml-gradient(linear, left top, left bottom, from(#005cbd), to(#049cd9));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#005cbd', EndColorStr='#049cd9', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#005cbd', EndColorStr='#049cd9', GradientType=0))";}#masthead div.inner,#footer div.inner{background:transparent url(../img/grid-20px.png) 0 -1px;padding:40px 0;-webkit-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);}
+#masthead,#footer{background-color:#049cd9;background-repeat:no-repeat;background-image:-webkit-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9));background-image:-webkit-linear-gradient(#0056b0, #049cd9);background-image:-moz-linear-gradient(#0056b0, #049cd9);background-image:-o-linear-gradient(top, #0056b0, #049cd9);background-image:-khtml-gradient(linear, left top, left bottom, from(#0056b0), to(#049cd9));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0))";}#masthead div.inner,#footer div.inner{background:transparent url(../img/grid-20px.png) 0 -1px;padding:40px 0;-webkit-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);-moz-box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);box-shadow:inset 0 10px 30px rgba(0, 0, 0, 0.25);}
#masthead h1,#footer h1,#masthead p,#footer p,#masthead small,#footer small{color:#fff;text-shadow:0 2px 0 rgba(0, 0, 0, 0.25);}
#masthead{margin-top:40px;margin-bottom:-40px;}#masthead h1{margin-bottom:0;}
#masthead p.lead{font-size:20px;font-weight:300;line-height:30px;margin:5px 0;}
diff --git a/less/docs.less b/less/docs.less
index b5838c9341..b10eb29a08 100644
--- a/less/docs.less
+++ b/less/docs.less
@@ -33,7 +33,7 @@ section {
// Blueprint-style header and footer
#masthead,
#footer {
- #gradient > .vertical(darken(@blue-dark, 5%), darken(@blue, 7.5%));
+ #gradient > .vertical(darken(@blue-dark, 7.5%), darken(@blue, 7.5%));
div.inner {
background: transparent url(../img/grid-20px.png) 0 -1px;
padding: 40px 0;
diff --git a/less/patterns.less b/less/patterns.less
index 1ff8bc9358..7c5a902fac 100644
--- a/less/patterns.less
+++ b/less/patterns.less
@@ -125,11 +125,12 @@ div.topbar {
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
.box-shadow(@shadow);
.transition(none);
+ // Placeholder text gets special styles; can't be bundled together though for some reason
&:-moz-placeholder {
- color: #fff;
+ color: @gray-lighter;
}
&::-webkit-input-placeholder {
- color: #fff;
+ color: @gray-lighter;
}
&:hover {
background-color: #444;
@@ -196,12 +197,12 @@ div.topbar {
li.menu {
position: relative;
a.menu {
- span.menu-label:after {
+ &:after {
width: 7px;
height: 7px;
display: inline-block;
- background: transparent url(/images/sprite-icons.png) no-repeat scroll -79px -100px;
- content:"↓";
+ background: transparent url(../img/dropdown-arrow.gif) no-repeat top center;
+ content: "↓";
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
@@ -214,6 +215,7 @@ div.topbar {
a:hover {
background-color: lighten(#00a0d1,5);
background-color: rgba(255,255,255,.1);
+ color: #fff;
}
ul {
display: block;