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