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