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