1/* Navigation (with dropdowns) */ 2 3.navbar { 4 width: 100%; 5 min-height: 60px; 6 display: block; 7 margin-bottom: 20px; 8 background: $navbar-color; // Change this color in settings to change the navbar color 9 position: relative; 10 @include respond(all-phones) { 11 border: none; 12 .column, .columns { 13 min-height: 0; 14 } 15 } 16 17 &.fixed { 18 position: fixed; 19 z-index: 99999; 20 } 21 &.pinned { 22 position: absolute; 23 } 24 a.toggle { 25 display: none; 26 27 // Navigation Toggle Mobile styles 28 @include respond(all-phones) { 29 top: 18%; 30 right: 4%; 31 width: 46px; 32 position: absolute; 33 text-align: center; 34 display: inline-block; 35 color: $navbar-link-color; 36 background: $navbar-color; 37 @include line-and-height(40px); 38 @include border-radius($button-radius); 39 @include font-size($larger); 40 &:hover { 41 background: lighten($navbar-color, 5%); 42 } 43 &:active, &.active { 44 background: darken($navbar-color, 5%); 45 } 46 } 47 } 48} 49 50.navbar .logo { 51 display: inline-block; 52 margin: 0 $gutter 0 0; 53 padding: 0; 54 @include line-and-height(height-calc($larger - 3)); 55 a { 56 display: block; 57 padding: 0; 58 overflow: hidden; 59 @include line-and-height(height-calc($larger - 3)); 60 img { 61 max-height: 95%; 62 } 63 } 64 65 // Navbar Logo Mobile Styles 66 @include respond(all-phones) { 67 float: $default-float; 68 display: inline; 69 a { 70 padding: 0; 71 img { 72 width: auto; 73 height: auto; 74 max-width: 100%; 75 } 76 } 77 } 78} 79 80.navbar ul { 81 display: table; 82 vertical-align: middle; 83 margin: 0; 84 float: none; 85 86 // Navbar Navigation List Mobile Specific Styles 87 @include respond(all-phones) { 88 position: absolute; 89 display: block; 90 width: 100% !important; 91 height: 0; 92 max-height: 0; 93 top: 60px; 94 left: 0; 95 overflow: hidden; 96 text-align: center; 97 background: darken($navbar-color, 5%); 98 &.active { 99 height: auto; 100 max-height: 600px; 101 z-index: 999998; 102 @include transition-duration(.5s); 103 @include box-shadow(0 2px 2px darken($navbar-color, 15%)); 104 } 105 } 106 107 li { 108 display: table-cell; 109 text-align: center; 110 padding-bottom: 0; 111 margin: 0; 112 @include line-and-height(height-calc($larger - 3)); 113 114 // Navbar List Item Mobile Specific Styles 115 @include respond(all-phones) { 116 display: block; 117 position: relative; 118 min-height: 50px; 119 max-height: 320px; 120 height: auto; 121 width: 100%; 122 border-right: 0 !important; 123 @include box-shadow(none); 124 @include transition-duration(.5s); 125 } 126 127 > a { 128 display: block; 129 padding: 0 ms(0); 130 white-space: nowrap; 131 color: $navbar-link-color; 132 text-shadow: 0 1px 2px darken($navbar-color, 20%), 133 0 1px 0 darken($navbar-color, 20%); 134 @include line-and-height(height-calc($larger - 3)); 135 @include font-size($norm); 136 i.icon-popup { 137 position: absolute; 138 } 139 } 140 .btn { 141 border-color: darken($navbar-color, 30%) !important; 142 } 143 &.field { 144 margin-bottom: 0 !important; 145 margin-right: 0; 146 @include respond(all-phones) { 147 padding: 0 $gutter-in-px; 148 } 149 input.search { 150 background: darken($navbar-color, 20%); 151 border: none; 152 color: $default-color; 153 } 154 } 155 .dropdown { 156 width: auto; 157 min-width: 0; 158 max-width: $min-device-width; 159 height: 0; 160 position: absolute; 161 background: lighten($default-color, 3%); 162 overflow: hidden; 163 z-index: 999; 164 } 165 // Navigation Dropdown Mobile Specific Styles 166 @include respond(all-phones) { 167 .dropdown { 168 width: 100%; 169 max-width: 100%; 170 position: relative; 171 @include box-shadow(none !important); 172 } 173 &.active .dropdown { 174 border-bottom: 1px solid darken($navbar-color, 10%); 175 } 176 &.active .dropdown ul { 177 position: relative; 178 top: 0; 179 background: darken($navbar-color, 8%); 180 min-height: 50px; 181 max-height: 250px; 182 height: auto; 183 overflow: auto; 184 @include box-shadow(none !important); 185 li { 186 min-height: 50px; 187 border-bottom: darken($navbar-color, 5%); 188 a { 189 color: $white; 190 border-bottom: 1px solid darken($navbar-color, 10%); 191 &:hover {color: $body-link-color;} 192 } 193 } 194 } 195 } 196 } 197} 198 199.navbar { 200 // Mobile Only Navbar Styles 201 @include respond(tablets) { 202 > ul > li > .btn a { 203 padding: 0 $small 0 $small !important; 204 } 205 ul > li .dropdown ul li.active .dropdown { 206 left: -$min-device-width; 207 } 208 } 209} 210 211.navcontain { 212 height: $navcontain-height; 213 @include respond(portrait-tablets) { 214 height: auto; 215 } 216} 217 218// Pretty Navigation Styles 219 220.pretty.navbar { 221 @include background-image(linear-gradient(lighten($navbar-color, 20%),darken($navbar-color, 10%))); 222 @include box-shadow(inset 0 1px 1px lighten($navbar-color, 20%), 223 0 1px 2px rgba(0,0,0,0.80) !important); /* Remove this line if you dont want a dropshadow on your navigation*/ 224 225 // Pretty Nav Toggle Styles 226 @include respond(all-phones) { 227 a.toggle { 228 border: 1px solid darken($navbar-color, 5%); 229 @include background-image(linear-gradient(lighten($navbar-color, 20%), $navbar-color)); 230 @include box-shadow(inset 0 1px 2px lighten($navbar-color, 25%), 231 inset 0 -1px 1px lighten($navbar-color, 5%), 232 inset 1px 0 1px lighten($navbar-color, 5%), 233 inset -1px 0 1px lighten($navbar-color, 5%), 234 0 1px 1px lighten($navbar-color, 10%)); 235 i { 236 @include text-shadow(0 1px 1px darken($navbar-color, 20%)); 237 } 238 &:hover { 239 @include background-image(linear-gradient(lighten($navbar-color, 25%), lighten($navbar-color, 5%))); 240 } 241 &:active, &.active { 242 @include background-image(linear-gradient(darken($navbar-color, 5%), $navbar-color)); 243 @include box-shadow(0 1px 1px lighten($navbar-color, 10%)); 244 } 245 } 246 } 247 &.row { 248 @include border-radius($button-radius); 249 @include respond(all-phones) { 250 @include border-radius(0); 251 } 252 } 253 ul li.field input.search { 254 @include background-image(linear-gradient(darken($navbar-color, 20%), lighten($navbar-color, 2%))); 255 border: none; 256 @include box-shadow(0 1px 2px lighten($navbar-color, 25%) !important); /* Remove this line if you dont want a dropshadow on your navigation*/ 257 } 258 > ul > li:first-child, .pretty.navbar > ul > li:first-child a:hover { 259 @include box-shadow(none); 260 } 261} 262 263// Dropdown menu styles 264 265.navbar li .dropdown { 266 width: auto; 267 min-width: 0; 268 max-width: $min-device-width; 269 height: 0; 270 position: absolute; 271 background: lighten($default-color, 3%); 272 overflow: hidden; 273 z-index: 999; 274 // Navigation Dropdown Mobile Specific Styles 275 @include respond(all-phones) { 276 .dropdown { 277 width: 100%; 278 max-width: 100%; 279 position: relative; 280 @include box-shadow(none !important); 281 } 282 &.active .dropdown { 283 border-bottom: 1px solid darken($navbar-color, 10%); 284 } 285 &.active .dropdown ul { 286 position: relative; 287 top: 0; 288 background: darken($navbar-color, 8%); 289 min-height: 50px; 290 max-height: 250px; 291 height: auto; 292 overflow: auto; 293 @include box-shadow(none !important); 294 li { 295 min-height: 50px; 296 border-bottom: darken($navbar-color, 5%); 297 a { 298 color: $white; 299 border-bottom: 1px solid darken($navbar-color, 10%); 300 &:hover {color: $body-link-color;} 301 } 302 } 303 } 304 } 305} 306 307.navbar li .dropdown ul { 308 margin: 0; 309 display: block; 310 > li { 311 position:relative; 312 display: block; 313 width: 100%; 314 float: left; 315 text-align: left; 316 height: auto; 317 @include border-radius(none); 318 @include respond(tablets) { 319 max-width: $min-device-width; 320 word-wrap: break-word; 321 } 322 a { 323 display: block; 324 padding: 0 20px; 325 color: $body-link-color; 326 border-bottom: 1px solid $horizontal-rule-color; 327 text-shadow: none; 328 @include line-and-height(height-calc($large - 3)); 329 @include respond(all-phones) { 330 padding: 0 $gutter-in-px; 331 } 332 } 333 .dropdown { 334 display: none; 335 background: lighten($default-color, 10%); 336 } 337 } 338 li:first-child a { 339 @include border-radius(0); 340 } 341} 342 343.gumby-no-touch .navbar ul li:hover > a, 344.gumby-touch .navbar ul li.active > a { 345 position: relative; 346 background: $info-hover-color; 347 z-index: 1000; 348} 349 350.gumby-no-touch .navbar ul li:hover .dropdown, 351.gumby-touch .navbar ul li.active .dropdown { 352 min-height: 50px; 353 max-height: $tablet-device-width - 207; 354 overflow: visible; 355 height: auto; 356 width: 100%; 357 padding: 0; 358 border-top: 1px solid darken($navbar-color, 5%); 359 @include box-shadow(0px 3px 4px rgba(0,0,0,.3)); 360} 361 362.gumby-no-touch .navbar ul li:hover .dropdown ul { 363 position: relative; 364 top: 0; 365 min-height: 50px; 366 max-height: 250px; 367 height: auto; 368 @include box-shadow(none !important); 369 @include transition-duration(.5s); 370 @include respond(all-phones) { 371 overflow: auto; 372 background: darken($navbar-color, 8%); 373 li { 374 border-bottom: darken($navbar-color, 5%); 375 a { 376 color: $white; 377 border-bottom: 1px solid darken($navbar-color, 10%); 378 &:hover {color: $body-link-color;} 379 } 380 } 381 } 382} 383 384.gumby-no-touch .navbar li .dropdown ul > li:hover .dropdown, 385.gumby-touch .navbar li .dropdown ul > li.active .dropdown { 386 border-top: none; 387 display: block; 388 position: absolute; 389 z-index: 9999; 390 left: 100%; 391 top: $nav-distance; 392 margin-top: 0; 393 @include respond(all-phones) { 394 position: relative; 395 left: 0; 396 ul { 397 background: darken($navbar-color, 15%) !important; 398 } 399 } 400} 401 402.gumby-no-touch .navbar li .dropdown ul li a:hover { 403 background: $default-color; 404} 405 406.gumby-touch .navbar a:hover { 407 color: $navbar-link-color !important; 408} 409 410.subnav { 411 display: block; 412 width: auto; 413 overflow: hidden; 414 margin: 0 0 18px 0; 415 padding-top: 4px; 416 li, dt, dd { 417 float: left; 418 display: inline; 419 margin-left: 9px; 420 margin-bottom: 4px; 421 &:first-child { 422 margin-left: 0; 423 } 424 } 425 dt { 426 color: $default-color; 427 font-weight: normal; 428 } 429 li a, dd a { 430 color: $navbar-link-color; 431 font-size: 15px; 432 text-decoration: none; 433 @include border-radius(4px); 434 } 435 li.active a, dd.active a { 436 background: $navbar-color; 437 padding: 5px 9px; 438 text-shadow: 0 1px 1px $navbar-color; 439 } 440} 441