1
1
/* stylelint-disable selector-class-pattern */
2
2
3
+ : root {
4
+ --megamenu-item-width : 300px ;
5
+ --megamenu-panel-width : 900px ;
6
+ --megamenu-panel-height : 500px ;
7
+ }
8
+
3
9
/* header and nav layout */
4
10
header .nav-wrapper {
5
11
background-color : var (--background-color );
@@ -62,6 +68,7 @@ header nav .nav-hamburger {
62
68
}
63
69
64
70
header nav .nav-hamburger button {
71
+ cursor : pointer;
65
72
height : 22px ;
66
73
margin : 0 ;
67
74
border : 0 ;
@@ -142,6 +149,13 @@ header nav .nav-brand a {
142
149
letter-spacing : var (--type-headline-1-letter-spacing );
143
150
}
144
151
152
+ li .nav-drop img {
153
+ max-width : var (--megamenu-item-width );
154
+ width : 100% ;
155
+ height : auto;
156
+ object-fit : contain;
157
+ }
158
+
145
159
header nav .nav-brand img {
146
160
width : 128px ;
147
161
height : auto;
@@ -170,7 +184,7 @@ header nav .nav-sections ul {
170
184
171
185
header nav .nav-sections ul > li ,
172
186
header nav .nav-sections ul > li > a {
173
- font-weight : 500 ;
187
+ font-weight : 500 ;
174
188
}
175
189
176
190
header nav .nav-sections ul > li > ul {
@@ -194,28 +208,13 @@ header nav .nav-sections ul > li > ul > li {
194
208
195
209
header nav .nav-sections .nav-drop {
196
210
position : relative;
197
- padding-right : 16px ;
211
+ padding : 0 16px ;
198
212
cursor : pointer;
213
+ border-radius : 4px ;
199
214
}
200
215
201
- header nav .nav-sections .nav-drop ::after {
202
- content : '' ;
203
- display : inline-block;
204
- position : absolute;
205
- top : 0.4rem ;
206
- right : 0.2rem ;
207
- transform : rotate (135deg );
208
- width : 0.6rem ;
209
- height : 0.6rem ;
210
- border : 2px solid currentcolor;
211
- border-radius : 0 1px 0 0 ;
212
- border-width : 2px 2px 0 0 ;
213
- }
214
-
215
- header nav .nav-sections .nav-drop [aria-expanded = 'true' ]::after {
216
- top : unset;
217
- bottom : 0.5em ;
218
- transform : rotate (315deg );
216
+ header nav .nav-sections .nav-drop [aria-expanded = 'true' ] {
217
+ background-color : var (--color-neutral-200 );
219
218
}
220
219
221
220
header nav .nav-sections ul {
@@ -224,25 +223,33 @@ header nav .nav-sections ul > li > ul > li {
224
223
margin : 0 ;
225
224
}
226
225
227
- header nav .nav-sections .default-content-wrapper > ul > li {
228
- flex : 0 1 auto ;
226
+ header nav .nav-sections .default-content-wrapper > ul > li > ul {
227
+ display : none ;
229
228
position : relative;
230
229
}
231
230
232
- header nav .nav-sections .default-content-wrapper > ul > li > ul {
233
- display : none;
231
+ header nav .nav-sections .nav-drop [aria-expanded = 'true' ] > ul {
232
+ height : var (--megamenu-panel-height );
233
+ flex-flow : column wrap;
234
+ }
235
+
236
+
237
+ header nav .nav-sections .default-content-wrapper > ul > li {
238
+ flex : 0 1 auto;
234
239
position : relative;
235
240
}
236
241
242
+ /* This is the style for the dropdown */
237
243
header nav .nav-sections .default-content-wrapper > ul > li [aria-expanded = 'true' ] > ul {
238
- display : block ;
244
+ display : flex ;
239
245
position : absolute;
240
246
left : -24px ;
241
- width : 200 px ;
247
+ width : var ( --megamenu-panel-width ) ;
242
248
top : 150% ;
243
249
padding : 16px ;
244
- background-color : var (--color-neutral-500 );
250
+ background-color : var (--color-neutral-50 );
245
251
white-space : initial;
252
+ overflow-x : scroll;
246
253
}
247
254
248
255
header nav .nav-sections .default-content-wrapper > ul > li > ul ::before {
@@ -285,6 +292,8 @@ header nav .nav-tools {
285
292
height : 100% ;
286
293
gap : var (--spacing-small );
287
294
align-items : center;
295
+ background : var (--background-color );
296
+ z-index : 3 ;
288
297
}
289
298
290
299
header nav .nav-tools-wrapper > button {
@@ -461,10 +470,10 @@ header .nav-search-input .search_autocomplete .popover-container {
461
470
462
471
.dropdown-wrapper .nav-tools-wrapper .nav-auth-menu-panel .authenticated-user-menu li > a : hover ,
463
472
.dropdown-wrapper .nav-tools-wrapper
464
- .nav-auth-menu-panel
465
- .authenticated-user-menu
466
- li
467
- > .logoutButton : hover {
473
+ .nav-auth-menu-panel
474
+ .authenticated-user-menu
475
+ li
476
+ > .logoutButton : hover {
468
477
background-color : lightgray;
469
478
}
470
479
@@ -494,3 +503,116 @@ header .nav-search-input .search_autocomplete .popover-container {
494
503
margin-top : 20px ;
495
504
z-index : 3 ;
496
505
}
506
+
507
+ ul li .nav-drop > ul > li > ul {
508
+ margin : 1em 0 0 .5em ;
509
+ }
510
+
511
+ main .overlay {
512
+ width : 100% ;
513
+ height : 100% ;
514
+ inset : 0 ;
515
+ background-color : rgb (0 0 0 / 50% );
516
+ z-index : 2 ;
517
+ }
518
+
519
+ header nav .nav-sections .active-submenu {
520
+ display : none;
521
+ }
522
+
523
+ @media (width < 900px) {
524
+ header {
525
+ position : relative;
526
+ }
527
+
528
+ header nav {
529
+ position : relative;
530
+ }
531
+
532
+ header nav [aria-expanded = 'true' ] {
533
+ overflow-x : hidden;
534
+ }
535
+
536
+ header nav [aria-expanded = 'true' ] .nav-tools {
537
+ background : var (--background-color );
538
+ bottom : 0 ;
539
+ height : auto;
540
+ left : 0 ;
541
+ overflow : hidden;
542
+ padding : 0.7em 1.5em ;
543
+ position : fixed;
544
+ width : 100% ;
545
+ }
546
+
547
+ header nav [aria-expanded = 'true' ] .nav-tools-panel--show {
548
+ position : fixed;
549
+ }
550
+
551
+ header nav .nav-sections {
552
+ position : relative;
553
+ }
554
+
555
+ header nav .nav-sections ul li {
556
+ line-height : 3em ;
557
+ }
558
+
559
+ header nav .nav-sections ul > li > ul ,
560
+ header nav .nav-sections ul > li > ul > li {
561
+ width : 100% ;
562
+ }
563
+
564
+ header nav .nav-sections ul > li .nav-drop {
565
+ cursor : pointer;
566
+ }
567
+
568
+ header nav .nav-sections ul > li .nav-drop ::after {
569
+ content : '\276F' ;
570
+ position : absolute;
571
+ right : 3vw ;
572
+ }
573
+
574
+ header nav .nav-sections ul > li .nav-drop ul {
575
+ display : none;
576
+ }
577
+
578
+ header nav .nav-sections .active-submenu {
579
+ background : var (--background-color );
580
+ display : none;
581
+ height : 100% ;
582
+ position : absolute;
583
+ top : 30px ;
584
+ width : 100% ;
585
+ }
586
+
587
+ header nav .nav-sections .active-submenu button ::before {
588
+ content : '\276E' ;
589
+ margin-right : .5em ;
590
+ }
591
+
592
+ header nav .nav-sections .active-submenu button ::after {
593
+ content : '\2715' ;
594
+ position : absolute;
595
+ right : 8vw ;
596
+ }
597
+
598
+ header nav .nav-sections .active-submenu button {
599
+ background : none;
600
+ border : 0 ;
601
+ border-bottom : 1px solid var (--color-neutral-500 );
602
+ cursor : pointer;
603
+ left : -2em ;
604
+ padding : 0 2em 1em ;
605
+ position : relative;
606
+ text-align : left;
607
+ width : 102vw ;
608
+ }
609
+
610
+ header nav .nav-sections .active-submenu ul > li .nav-drop ::after {
611
+ content : none;
612
+ }
613
+
614
+ header nav .nav-sections .active-submenu .visible ,
615
+ header nav .nav-sections .active-submenu .visible ul > li .nav-drop ul {
616
+ display : block;
617
+ }
618
+ }
0 commit comments