PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.3.9
Easy Elements for Elementor – Addons & Website Templates v1.3.9
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / widgets / navigation-menu / css / navigation-menu.css

navigation-menu.css in Easy Elements for Elementor – Addons & Website Templates 1.3.9, at widgets/navigation-menu/css/navigation-menu.css

681 lines 17.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 :root {
2 --e-global-color-primary: #FFD012;
3 --e-global-color-secondary: #0B3665;
4 }
5
6 /* Navigation Menu CSS */
7 ul.eel-nav-menu,
8 .eel-nav-menu li,
9 .eel-nav-menu ul {
10 list-style: none !important;
11 margin: 0;
12 padding: 0;
13 }
14
15 .eel-nav-menu li.menu-item {
16 position: relative;
17 }
18
19 .eel-flyout-container .eel-nav-menu li.menu-item {
20 position: relative;
21 background: unset;
22 }
23
24 .eel-layout-vertical .eel-nav-menu li > .eel-menu-item .eel-menu-dynamic-icon {
25 margin-right: 8px;
26 }
27
28 .eel-layout-vertical.icon-align_right .eel-nav-menu > .menu-item > a {
29 display: flex !important;
30 justify-content: space-between;
31 }
32
33 .eel-layout-vertical.icon-align_right .eel-nav-menu li > .eel-menu-item .eel-menu-dynamic-icon {
34 order: 2 !important;
35 }
36
37 .eel-nav-menu .sub-menu li.menu-item {
38 position: relative;
39 background: inherit;
40 }
41
42 .eel-nav-menu__theme-icon-yes button.sub-menu-toggle {
43 display: none;
44 }
45
46 div.eel-nav-menu,
47 .elementor-widget-eel-nav-menu .elementor-widget-container {
48 -js-display: flex;
49 display: flex;
50 flex-direction: column;
51 }
52
53 .eel-nav-menu__layout-horizontal,
54 .eel-nav-menu__layout-horizontal .eel-nav-menu { /* Old Safari, iOS */ /* Old Firefox */ /* IE 10 */ /* Newer Safari, Chrome */
55 display: flex; /* Standard syntax */
56 flex-wrap: wrap;
57 }
58
59 .eel-nav-menu .parent-has-no-child .eel-menu-toggle {
60 display: none;
61 }
62
63 .eel-nav-menu__layout-horizontal .eel-nav-menu .sub-menu,
64 .eel-submenu-action-hover .eel-layout-vertical .eel-nav-menu .sub-menu {
65 position: absolute;
66 top: 100%;
67 left: 0;
68 z-index: 16;
69 visibility: hidden;
70 opacity: 0;
71 text-align: left;
72 transition: all 300ms ease-in;
73 }
74
75 .eel-nav-menu__layout-horizontal .eel-nav-menu .menu-item-has-children:hover > .sub-menu,
76 .eel-nav-menu__layout-horizontal .eel-nav-menu .menu-item-has-children:focus > .sub-menu {
77 visibility: visible;
78 opacity: 1;
79 }
80
81 .eel-submenu-action-click .eel-nav-menu .menu-item-has-children:hover > .sub-menu,
82 .eel-submenu-action-click .eel-nav-menu .menu-item-has-children:focus > .sub-menu {
83 visibility: hidden;
84 opacity: 0;
85 }
86
87 @media (min-width: 992px) {
88 .eel-nav-menu .menu-item-has-children .sub-menu {
89 position: absolute;
90 top: 100%;
91 left: 0;
92 z-index: 9999;
93 visibility: hidden;
94 opacity: 0;
95 transition: 0.3s ease-in-out;
96 }
97 .eel_animation_slide_down .eel-nav-menu .menu-item-has-children .sub-menu {
98 transform: scaleY(0);
99 transform-origin: top;
100 }
101 .eel_animation_slide_up .eel-nav-menu .menu-item-has-children .sub-menu {
102 transform: translateY(10px);
103 }
104 .eel_animation_right .eel-nav-menu .menu-item-has-children .sub-menu {
105 transform: translateX(10px);
106 }
107 .eel_animation_left .eel-nav-menu .menu-item-has-children .sub-menu {
108 transform: translateX(-10px);
109 }
110 .eel_animation_zoom .eel-nav-menu .menu-item-has-children .sub-menu {
111 transform: scale(0.8);
112 transition: transform 0.3s ease, opacity 0.3s ease;
113 }
114 }
115 .eel-flyout-container .eel-nav-menu .menu-item-has-children .menu-item-has-children .sub-menu {
116 top: 0;
117 left: 0;
118 }
119
120 .eel-nav-menu .menu-item-has-children .menu-item-has-children .sub-menu {
121 top: 0;
122 left: 100%;
123 }
124
125 .eel-nav-menu__layout-horizontal .eel-nav-menu .menu-item-has-children:hover > .sub-menu,
126 .eel-nav-menu__layout-horizontal .eel-nav-menu .menu-item-has-children.focus > .sub-menu {
127 visibility: visible;
128 opacity: 1;
129 }
130
131 .eel-nav-menu__layout-horizontal.eel_animation_slide_down .eel-nav-menu .menu-item-has-children:hover > .sub-menu,
132 .eel-nav-menu__layout-horizontal.eel_animation_slide_down .eel-nav-menu .menu-item-has-children.focus > .sub-menu {
133 transform: scaleY(1);
134 }
135
136 .eel-nav-menu__layout-horizontal.eel_animation_slide_up .eel-nav-menu .menu-item-has-children:hover > .sub-menu,
137 .eel-nav-menu__layout-horizontal.eel_animation_slide_up .eel-nav-menu .menu-item-has-children.focus > .sub-menu {
138 transform: translateY(0px);
139 }
140
141 .eel-nav-menu__layout-horizontal.eel_animation_right .eel-nav-menu .menu-item-has-children:hover > .sub-menu,
142 .eel-nav-menu__layout-horizontal.eel_animation_right .eel-nav-menu .menu-item-has-children.focus > .sub-menu {
143 transform: translateY(0px);
144 }
145
146 .eel-nav-menu__layout-horizontal.eel_animation_left .eel-nav-menu .menu-item-has-children:hover > .sub-menu,
147 .eel-nav-menu__layout-horizontal.eel_animation_left .eel-nav-menu .menu-item-has-children.focus > .sub-menu {
148 transform: translateY(0px);
149 }
150
151 .eel-nav-menu__layout-horizontal.eel_animation_zoom .eel-nav-menu .menu-item-has-children:hover > .sub-menu,
152 .eel-nav-menu__layout-horizontal.eel_animation_zoom .eel-nav-menu .menu-item-has-children.focus > .sub-menu {
153 transform: scale(1);
154 }
155
156 header {
157 position: relative;
158 }
159
160 .eel-nav-menu a.eel-menu-item:hover,
161 .eel-nav-menu a.eel-sub-menu-item:hover {
162 text-decoration: none;
163 }
164
165 .eel-nav-menu .sub-menu {
166 width: 220px;
167 margin: 0;
168 z-index: 9999;
169 }
170
171 .eel-nav-menu__layout-horizontal {
172 font-size: 0;
173 }
174
175 .eel-nav-menu__layout-horizontal li.menu-item,
176 .eel-nav-menu__layout-horizontal > li.menu-item {
177 font-size: medium;
178 }
179
180 .eel-nav-menu__layout-horizontal .eel-nav-menu .sub-menu:not(.easyel--elementor-template-mega-menu) {
181 box-shadow: 0 10px 10px -2px rgba(0, 0, 0, 0.0274509804);
182 }
183
184 .eel-nav-menu ul.sub-menu:not(.easyel--elementor-template-mega-menu) li:first-child > a {
185 border: none !important;
186 }
187
188 .eel-nav-menu-icon {
189 padding: 0.35em;
190 border: 0 solid;
191 }
192
193 .eel-nav-menu-icon svg {
194 width: 25px;
195 height: 25px;
196 line-height: 25px;
197 font-size: 25px;
198 }
199
200 .eel-nav-menu-icon i:focus {
201 outline: 0;
202 }
203
204 .eel-nav-menu__layout-expandible {
205 visibility: hidden;
206 opacity: 0;
207 }
208
209 .eel-nav-menu__layout-expandible .sub-menu {
210 visibility: hidden;
211 opacity: 0;
212 }
213
214 .eel-active-menu + .eel-nav-menu__layout-expandible {
215 visibility: visible;
216 opacity: 1;
217 height: auto;
218 }
219
220 .eel-layout-expandible nav {
221 height: 0;
222 }
223
224 .eel-nav-menu .sub-menu li.menu-item .description {
225 display: none;
226 }
227
228 .eel-nav-sub-menu-icon, .eel-nav-menu__icon {
229 display: inline-block;
230 line-height: 1;
231 }
232
233 @media (min-width: 1025px) {
234 nav:not(.eel-nav-menu__layout-vertical) .eel-nav-menu > .menu-item > a.eel-menu-item {
235 padding-left: 20px;
236 padding-right: 20px;
237 padding-top: 25px;
238 padding-bottom: 25px;
239 display: inline-block;
240 }
241 ul.sub-menu:not(.easyel-mega--current-active) .menu-item > a {
242 padding-left: 20px;
243 padding-right: 20px;
244 padding-top: 10px;
245 padding-bottom: 10px;
246 display: block;
247 }
248 }
249 .eel-nav-menu__layout-vertical .eel-nav-menu > .menu-item > a.eel-menu-item {
250 padding-top: 10px;
251 padding-bottom: 10px;
252 display: block;
253 }
254
255 .eel-nav-menu .menu-item-has-children a {
256 position: relative;
257 }
258
259 .eel-nav-menu .menu-item-has-children > a:before {
260 content: "\e93f";
261 font-family: "Unicons" !important;
262 position: absolute !important;
263 right: 2px;
264 top: 52%;
265 transform: translateY(-50%) rotate(0deg) !important;
266 font-size: 16px;
267 opacity: 1 !important;
268 color: currentColor;
269 }
270
271 ul.eel-nav-menu .menu-item-has-children a:hover::before {
272 transform: translateY(-50%) rotate(-180deg) !important;
273 }
274
275 .eel-nav-menu ul.sub-menu .menu-item-has-children a:before {
276 right: 10px;
277 }
278
279 .eel-nav-menu ul.sub-menu .menu-item:not(.menu-item-has-children) a:before {
280 display: none;
281 }
282
283 .eel-layout-vertical .menu-item-has-children a.eel-menu-item::before {
284 display: none !important;
285 }
286
287 .eel-nav-menu__layout-horizontal .eel-nav-menu .sub-arrow {
288 margin-left: 5px;
289 }
290
291 .eel-nav-menu__layout-vertical .eel-nav-menu .sub-arrow,
292 .eel-layout-expandible .sub-arrow,
293 .eel-flyout-wrapper .sub-arrow {
294 padding: 10px;
295 }
296
297 .eel-nav-menu .child-item,
298 .eel-nav-menu__layout-vertical .eel-nav-menu .child-item {
299 font-size: 14px;
300 line-height: 1;
301 padding: 10px 0 10px 10px;
302 margin-top: -10px;
303 margin-bottom: -10px;
304 position: absolute;
305 right: 0;
306 margin-right: 20px;
307 }
308
309 .eel-layout-horizontal .eel-nav-menu__toggle,
310 .eel-layout-vertical .eel-nav-menu__toggle {
311 visibility: hidden;
312 opacity: 0;
313 display: none;
314 }
315
316 .eel-nav-menu-icon {
317 display: inline-block;
318 line-height: 1;
319 text-align: center;
320 }
321
322 /* ===========================================================
323 * Flyout Container
324 * ======================================================== */
325 .eel-flyout-content {
326 height: 100%;
327 overflow-x: hidden;
328 overflow-y: auto;
329 line-height: 1.4em;
330 color: #fff;
331 }
332
333 /* iOS fix */
334 @media (max-width: 1024px) {
335 .eel-flyout-content {
336 transform: translateZ(0);
337 }
338 }
339 .eel-flyout-content::-webkit-scrollbar {
340 display: none;
341 }
342
343 .admin-bar .eel-side {
344 margin-top: 32px;
345 }
346
347 /* Tablet */
348 @media only screen and (max-width: 1024px) {
349 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal li,
350 .eel-nav-menu__breakpoint-tablet .eel-nav-menu {
351 width: 100%;
352 margin-right: 0px;
353 }
354 .eel-nav-menu .sub-arrow {
355 display: block !important;
356 }
357 .eel-nav-menu .menu-item-has-children a::before {
358 display: none !important;
359 }
360 .eel-nav-menu .menu-item-has-children a {
361 margin: 0;
362 }
363 .eel-submenu-animation-slide_up .eel-layout-horizontal .menu-item-has-children.submenu-open > ul.sub-menu {
364 overflow: visible !important;
365 opacity: 1 !important;
366 visibility: visible !important;
367 display: block !important;
368 position: relative !important;
369 z-index: 9999;
370 transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
371 }
372 .eel-nav-menu__breakpoint-tablet .eel-layout-horizontal .eel-nav-menu__toggle,
373 .eel-nav-menu__breakpoint-tablet .eel-layout-vertical .eel-nav-menu__toggle {
374 display: block;
375 }
376 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal .eel-nav-menu {
377 visibility: hidden;
378 opacity: 0;
379 }
380 .eel-nav-menu__breakpoint-tablet .eel-active-menu + .eel-nav-menu__layout-horizontal .eel-nav-menu {
381 visibility: visible;
382 opacity: 1;
383 }
384 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal,
385 li:not(.easyel-mega--current-active) .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-vertical {
386 visibility: hidden;
387 opacity: 0;
388 height: 0;
389 }
390 .easyel-mega--current-active .eel-nav-menu-icon {
391 display: none;
392 }
393 .eel-nav-menu__breakpoint-tablet .eel-active-menu + .eel-nav-menu__layout-horizontal,
394 .eel-nav-menu__breakpoint-tablet .eel-active-menu + .eel-nav-menu__layout-vertical {
395 visibility: visible;
396 opacity: 1;
397 height: auto;
398 }
399 .eel-nav-menu__breakpoint-tablet .eel-active-menu.eel-active-menu-full-width + .eel-nav-menu__layout-horizontal .eel-nav-menu {
400 position: relative;
401 }
402 .eel-nav-menu__breakpoint-tablet .eel-active-menu.eel-active-menu-full-width + .eel-nav-menu__layout-horizontal,
403 .eel-nav-menu__breakpoint-tablet .eel-active-menu.eel-active-menu-full-width + .eel-nav-menu__layout-vertical {
404 position: absolute;
405 background: #fff;
406 padding: 25px 0 20px;
407 box-shadow: 0 10px 7px rgba(0, 0, 0, 0.0392156863);
408 }
409 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal .sub-menu {
410 visibility: hidden;
411 opacity: 0;
412 }
413 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal .menu-item-has-children .menu-item-has-children .sub-menu {
414 top: 0;
415 left: 0;
416 }
417 .eel-nav-menu__breakpoint-tablet .eel-layout-horizontal .eel-nav-menu__toggle,
418 .eel-nav-menu__breakpoint-tablet .eel-layout-vertical .eel-nav-menu__toggle {
419 visibility: visible;
420 opacity: 1;
421 display: block;
422 }
423 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-vertical {
424 float: none;
425 }
426 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal .sub-menu {
427 position: relative;
428 height: auto;
429 top: 0;
430 }
431 .eel-nav-menu__breakpoint-tablet .saved-content,
432 .eel-nav-menu__breakpoint-tablet .sub-menu,
433 .eel-nav-menu__breakpoint-tablet .child {
434 left: 0 !important;
435 width: auto !important;
436 }
437 .eel-nav-menu .sub-menu {
438 min-width: auto;
439 margin: 0;
440 }
441 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal .eel-nav-menu .sub-arrow {
442 padding: 0;
443 }
444 .eel-pointer__double-line .menu-item.parent a.eel-menu-item::before, .eel-pointer__double-line .menu-item.parent a.eel-menu-item::after, .eel-pointer__underline .menu-item.parent a.eel-menu-item::before, .eel-pointer__underline .menu-item.parent a.eel-menu-item::after, .eel-pointer__overline .menu-item.parent a.eel-menu-item::before, .eel-pointer__overline .menu-item.parent a.eel-menu-item::after {
445 display: none !important;
446 }
447 .sub-menu li.menu-item:first-child {
448 border: none !important;
449 }
450 .eel-nav-menu .eel-layout-horizontal li + li {
451 border-top: 1px solid #f0f0f0;
452 margin-top: 0px !important;
453 }
454 .eel-nav-menu-icon {
455 padding: 0;
456 }
457 .eel-nav-menu .menu-item-has-children .menu-item-has-children .sub-menu {
458 left: 0;
459 }
460 }
461 .eel-toggle-no .eel-layout-expandible .eel-nav-menu__toggle {
462 display: none;
463 }
464
465 header.eel-sticky-header-on.eel-up-scroll .elementor-2364 .elementor-element.elementor-element-459a928 > .elementor-widget-container {
466 box-shadow: none;
467 background: none;
468 }
469
470 header.eel-sticky-header-on.eel--fixed-top-sticky,
471 header.eel-sticky-header-on.eel-up-scroll {
472 box-shadow: 0 2px 7px rgba(0, 0, 0, 0.0509803922);
473 }
474
475 .eel-sticky-logo {
476 display: none !important;
477 }
478
479 .eel-sticky-header-on.eel--fixed-top-sticky .eel-sticky-logo,
480 .eel-sticky-header-on.eel-up-scroll .eel-sticky-logo {
481 display: inline-block !important;
482 }
483 .eel-sticky-header-on.eel--fixed-top-sticky .eel-main-logo:not(.eel-no-sticky),
484 .eel-sticky-header-on.eel-up-scroll .eel-main-logo:not(.eel-no-sticky) {
485 display: none !important;
486 }
487
488 @media (min-width: 992px) {
489 body.logged-in:not(.elementor-editor-active) header.eel-sticky-header-on {
490 top: 32px;
491 }
492 }
493 header.eel-sticky-header-on {
494 position: fixed !important;
495 top: 0;
496 z-index: 9999 !important;
497 width: 100% !important;
498 transition: all 0.3s ease !important;
499 margin: 0 auto;
500 left: 0;
501 right: 0;
502 will-change: transform, top;
503 }
504
505 header.eel-sticky-header {
506 position: fixed;
507 top: 0;
508 left: 0;
509 right: 0;
510 z-index: 999;
511 transition: transform 0.4s ease, top 0.4s ease;
512 }
513
514 body.admin-bar header.eel-sticky-header {
515 top: 32px;
516 }
517
518 @media screen and (max-width: 782px) {
519 body.admin-bar header.eel-sticky-header {
520 top: 46px;
521 }
522 }
523 header.eel-down-scroll {
524 transform: translateY(-100%);
525 }
526
527 header.eel-up-scroll {
528 transform: translateY(0);
529 }
530
531 @media only screen and (min-width: 1025px) {
532 .eel-nav-menu.horizontal ul > li.easyel-mega--current-active {
533 position: static;
534 }
535 .easyel--elementor-template-mega-menu {
536 position: absolute;
537 z-index: 999;
538 visibility: hidden;
539 overflow: hidden;
540 transition: all 0.5s ease;
541 opacity: 0;
542 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
543 transition: all 0.1s;
544 width: 100% !important;
545 left: 0;
546 right: 0;
547 top: 100%;
548 margin: 0 auto;
549 }
550 .eel-submenu-animation-none .easyel--elementor-template-mega-menu {
551 transform: translateY(0);
552 }
553 .easyel-mega--current-active .unicon-chevron-down {
554 display: none;
555 }
556 }
557 .easyel-mega--current-active .unicon-chevron-down::before {
558 font-size: 22px;
559 }
560
561 @media only screen and (max-width: 1024px) {
562 .easyel--elementor-template-mega-menu.sub-menu {
563 width: 100% !important;
564 }
565 }
566 .easyel-mega--current-active .eel-nav-menu {
567 display: block;
568 }
569
570 .sidebar-on-mobile {
571 position: fixed;
572 top: 0;
573 right: 0;
574 max-width: 420px;
575 width: 100%;
576 height: 110vh;
577 background: #fff;
578 transition: transform 0.3s ease;
579 z-index: 9999;
580 padding: 60px 25px 40px 25px;
581 overflow-y: auto;
582 display: grid;
583 }
584 .sidebar-on-mobile .eel-nav-menu-icon {
585 position: absolute;
586 right: 20px;
587 top: 20px;
588 font-size: 25px;
589 border: 1px solid rgba(0, 0, 0, 0.0392156863);
590 border-radius: 100%;
591 display: inline-grid;
592 place-content: center;
593 line-height: 36px;
594 width: 36px;
595 height: 36px;
596 cursor: pointer;
597 z-index: 999;
598 color: #121212;
599 }
600 .sidebar-on-mobile .eel-nav-menu .sub-arrow {
601 margin: 0;
602 display: none !important;
603 }
604
605 .sidebar-on-mobile .eel-nav-menu .sub-menu {
606 width: 100%;
607 }
608
609 .sidebar-on-mobile.eel-mobile-open-position-top {
610 transform: scaleY(0);
611 transform-origin: top;
612 max-width: 100%;
613 }
614
615 .sidebar-on-mobile.eel-mobile-open-position-top.easyel-open {
616 transform: scaleY(1);
617 }
618
619 .sidebar-on-mobile.eel-mobile-open-position-right {
620 transform: translateX(100%);
621 }
622
623 body.logged-in .sidebar-on-mobile {
624 padding: 80px 25px 40px 40px;
625 }
626 body.logged-in .sidebar-on-mobile .eel-nav-menu-icon {
627 top: 50px;
628 }
629
630 .sidebar-on-mobile li.menu-item a {
631 display: block;
632 padding: 14px 0;
633 max-width: 100%;
634 width: auto;
635 font-size: 20px;
636 line-height: 104%;
637 }
638
639 .sidebar-on-mobile li + li a {
640 border-top: 1px solid rgba(0, 0, 0, 0.07);
641 }
642
643 .sidebar-on-mobile ul.easyel-mega--current li + li a {
644 border-top: none;
645 }
646
647 .sidebar-on-mobile .eel-nav-menu .menu-item-has-children .sub-menu {
648 display: none;
649 padding-left: 20px;
650 position: relative;
651 visibility: visible;
652 opacity: 1;
653 }
654
655 .sidebar-on-mobile .eel-nav-menu .menu-item-has-children .sub-menu.easyel-mega--current {
656 padding-left: 0;
657 }
658
659 .sidebar-on-mobile.eel-mobile-open-position-right.easyel-open {
660 transform: translateX(0);
661 }
662
663 .sidebar-on-mobile .unicon-chevron-down {
664 display: inline-grid !important;
665 height: 30px;
666 width: 30px;
667 cursor: pointer;
668 position: absolute;
669 right: 0;
670 place-content: center;
671 color: currentColor;
672 top: 7px;
673 transition: transform 0.3s ease;
674 }
675 .sidebar-on-mobile .unicon-chevron-down.active {
676 transform: rotate(180deg);
677 }
678
679 .sidebar-on-mobile ul.sub-menu li:not(.menu-item-has-children) .unicon-chevron-down {
680 display: none !important;
681 }