PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.4.9
Easy Elements for Elementor – Addons & Website Templates v1.4.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.4.9, at widgets/navigation-menu/css/navigation-menu.css

685 lines 18.0 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:not(.easyel-mega--current-active) a {
256 position: relative;
257 }
258
259 .eel-nav-menu.horizontal ul > li.easyel-mega--current-active > a {
260 position: relative;
261 }
262
263 .eel-nav-menu .menu-item-has-children > a:before {
264 content: "\e93f";
265 font-family: "Unicons" !important;
266 position: absolute !important;
267 right: 2px;
268 top: 52%;
269 transform: translateY(-50%) rotate(0deg) !important;
270 font-size: 16px;
271 opacity: 1 !important;
272 color: currentColor;
273 }
274
275 ul.eel-nav-menu .menu-item-has-children a:hover::before {
276 transform: translateY(-50%) rotate(-180deg) !important;
277 }
278
279 .eel-nav-menu ul.sub-menu .menu-item-has-children a:before {
280 right: 10px;
281 }
282
283 .eel-nav-menu ul.sub-menu .menu-item:not(.menu-item-has-children) a:before {
284 display: none;
285 }
286
287 .eel-layout-vertical .menu-item-has-children a.eel-menu-item::before {
288 display: none !important;
289 }
290
291 .eel-nav-menu__layout-horizontal .eel-nav-menu .sub-arrow {
292 margin-left: 5px;
293 }
294
295 .eel-nav-menu__layout-vertical .eel-nav-menu .sub-arrow,
296 .eel-layout-expandible .sub-arrow,
297 .eel-flyout-wrapper .sub-arrow {
298 padding: 10px;
299 }
300
301 .eel-nav-menu .child-item,
302 .eel-nav-menu__layout-vertical .eel-nav-menu .child-item {
303 font-size: 14px;
304 line-height: 1;
305 padding: 10px 0 10px 10px;
306 margin-top: -10px;
307 margin-bottom: -10px;
308 position: absolute;
309 right: 0;
310 margin-right: 20px;
311 }
312
313 .eel-layout-horizontal .eel-nav-menu__toggle,
314 .eel-layout-vertical .eel-nav-menu__toggle {
315 visibility: hidden;
316 opacity: 0;
317 display: none;
318 line-height: 100%;
319 }
320
321 .eel-nav-menu-icon {
322 display: inline-block;
323 line-height: 1;
324 text-align: center;
325 }
326
327 /* ===========================================================
328 * Flyout Container
329 * ======================================================== */
330 .eel-flyout-content {
331 height: 100%;
332 overflow-x: hidden;
333 overflow-y: auto;
334 line-height: 1.4em;
335 color: #fff;
336 }
337
338 /* iOS fix */
339 @media (max-width: 1024px) {
340 .eel-flyout-content {
341 transform: translateZ(0);
342 }
343 }
344 .eel-flyout-content::-webkit-scrollbar {
345 display: none;
346 }
347
348 .admin-bar .eel-side {
349 margin-top: 32px;
350 }
351
352 /* Tablet */
353 @media only screen and (max-width: 1024px) {
354 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal li,
355 .eel-nav-menu__breakpoint-tablet .eel-nav-menu {
356 width: 100%;
357 margin-right: 0px;
358 }
359 .eel-nav-menu .sub-arrow {
360 display: block !important;
361 }
362 .eel-nav-menu .menu-item-has-children a::before {
363 display: none !important;
364 }
365 .eel-nav-menu .menu-item-has-children a {
366 margin: 0;
367 }
368 .eel-submenu-animation-slide_up .eel-layout-horizontal .menu-item-has-children.submenu-open > ul.sub-menu {
369 overflow: visible !important;
370 opacity: 1 !important;
371 visibility: visible !important;
372 display: block !important;
373 position: relative !important;
374 z-index: 9999;
375 transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
376 }
377 .eel-nav-menu__breakpoint-tablet .eel-layout-horizontal .eel-nav-menu__toggle,
378 .eel-nav-menu__breakpoint-tablet .eel-layout-vertical .eel-nav-menu__toggle {
379 display: block;
380 }
381 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal .eel-nav-menu {
382 visibility: hidden;
383 opacity: 0;
384 }
385 .eel-nav-menu__breakpoint-tablet .eel-active-menu + .eel-nav-menu__layout-horizontal .eel-nav-menu {
386 visibility: visible;
387 opacity: 1;
388 }
389 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal,
390 li:not(.easyel-mega--current-active) .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-vertical {
391 visibility: hidden;
392 opacity: 0;
393 height: 0;
394 }
395 .easyel-mega--current-active .eel-nav-menu-icon {
396 display: none;
397 }
398 .eel-nav-menu__breakpoint-tablet .eel-active-menu + .eel-nav-menu__layout-horizontal,
399 .eel-nav-menu__breakpoint-tablet .eel-active-menu + .eel-nav-menu__layout-vertical {
400 visibility: visible;
401 opacity: 1;
402 height: auto;
403 }
404 .eel-nav-menu__breakpoint-tablet .eel-active-menu.eel-active-menu-full-width + .eel-nav-menu__layout-horizontal .eel-nav-menu {
405 position: relative;
406 }
407 .eel-nav-menu__breakpoint-tablet .eel-active-menu.eel-active-menu-full-width + .eel-nav-menu__layout-horizontal,
408 .eel-nav-menu__breakpoint-tablet .eel-active-menu.eel-active-menu-full-width + .eel-nav-menu__layout-vertical {
409 position: absolute;
410 background: #fff;
411 padding: 25px 0 20px;
412 box-shadow: 0 10px 7px rgba(0, 0, 0, 0.0392156863);
413 }
414 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal .sub-menu {
415 visibility: hidden;
416 opacity: 0;
417 }
418 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal .menu-item-has-children .menu-item-has-children .sub-menu {
419 top: 0;
420 left: 0;
421 }
422 .eel-nav-menu__breakpoint-tablet .eel-layout-horizontal .eel-nav-menu__toggle,
423 .eel-nav-menu__breakpoint-tablet .eel-layout-vertical .eel-nav-menu__toggle {
424 visibility: visible;
425 opacity: 1;
426 display: block;
427 }
428 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-vertical {
429 float: none;
430 }
431 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal .sub-menu {
432 position: relative;
433 height: auto;
434 top: 0;
435 }
436 .eel-nav-menu__breakpoint-tablet .saved-content,
437 .eel-nav-menu__breakpoint-tablet .sub-menu,
438 .eel-nav-menu__breakpoint-tablet .child {
439 left: 0 !important;
440 width: auto !important;
441 }
442 .eel-nav-menu .sub-menu {
443 min-width: auto;
444 margin: 0;
445 }
446 .eel-nav-menu__breakpoint-tablet .eel-nav-menu__layout-horizontal .eel-nav-menu .sub-arrow {
447 padding: 0;
448 }
449 .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 {
450 display: none !important;
451 }
452 .eel-nav-menu .eel-layout-horizontal li + li {
453 border-top: 1px solid #f0f0f0;
454 margin-top: 0px !important;
455 }
456 .eel-nav-menu-icon {
457 padding: 0;
458 display: grid;
459 }
460 .eel-nav-menu .menu-item-has-children .menu-item-has-children .sub-menu {
461 left: 0;
462 }
463 }
464 .eel-toggle-no .eel-layout-expandible .eel-nav-menu__toggle {
465 display: none;
466 }
467
468 header.eel-sticky-header-on.eel-up-scroll .elementor-2364 .elementor-element.elementor-element-459a928 > .elementor-widget-container {
469 box-shadow: none;
470 background: none;
471 }
472
473 header.eel-sticky-header-on.eel--fixed-top-sticky,
474 header.eel-sticky-header-on.eel-up-scroll {
475 box-shadow: 0 2px 7px rgba(0, 0, 0, 0.0509803922);
476 }
477
478 .eel-sticky-logo {
479 display: none !important;
480 }
481
482 .eel-sticky-header-on.eel--fixed-top-sticky .eel-sticky-logo,
483 .eel-sticky-header-on.eel-up-scroll .eel-sticky-logo {
484 display: inline-block !important;
485 }
486 .eel-sticky-header-on.eel--fixed-top-sticky .eel-main-logo:not(.eel-no-sticky),
487 .eel-sticky-header-on.eel-up-scroll .eel-main-logo:not(.eel-no-sticky) {
488 display: none !important;
489 }
490
491 @media (min-width: 992px) {
492 body.logged-in:not(.elementor-editor-active) header.eel-sticky-header-on {
493 top: 32px;
494 }
495 }
496 header.eel-sticky-header-on {
497 position: fixed !important;
498 top: 0;
499 z-index: 9999 !important;
500 width: 100% !important;
501 transition: all 0.3s ease !important;
502 margin: 0 auto;
503 left: 0;
504 right: 0;
505 will-change: transform, top;
506 }
507
508 header.eel-sticky-header {
509 position: fixed;
510 top: 0;
511 left: 0;
512 right: 0;
513 z-index: 999;
514 transition: transform 0.4s ease, top 0.4s ease;
515 }
516
517 body.admin-bar header.eel-sticky-header {
518 top: 32px;
519 }
520
521 @media screen and (max-width: 782px) {
522 body.admin-bar header.eel-sticky-header {
523 top: 46px;
524 }
525 }
526 header.eel-down-scroll {
527 transform: translateY(-100%);
528 }
529
530 header.eel-up-scroll {
531 transform: translateY(0);
532 }
533
534 @media only screen and (min-width: 1025px) {
535 .eel-nav-menu.horizontal ul > li.easyel-mega--current-active {
536 position: static;
537 }
538 .easyel--elementor-template-mega-menu {
539 position: absolute;
540 z-index: 999;
541 visibility: hidden;
542 overflow: hidden;
543 transition: all 0.5s ease;
544 opacity: 0;
545 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
546 transition: all 0.1s;
547 width: 100% !important;
548 left: 0;
549 right: 0;
550 top: 100%;
551 margin: 0 auto;
552 }
553 .eel-submenu-animation-none .easyel--elementor-template-mega-menu {
554 transform: translateY(0);
555 }
556 .easyel-mega--current-active .unicon-chevron-down {
557 display: none;
558 }
559 }
560 .easyel-mega--current-active .unicon-chevron-down::before {
561 font-size: 22px;
562 }
563
564 @media only screen and (max-width: 1024px) {
565 .easyel--elementor-template-mega-menu.sub-menu {
566 width: 100% !important;
567 }
568 }
569 .easyel-mega--current-active .eel-nav-menu {
570 display: block;
571 }
572
573 .sidebar-on-mobile {
574 position: fixed;
575 top: 0;
576 right: 0;
577 max-width: 420px;
578 width: 100%;
579 height: 100vh;
580 background: #fff;
581 transition: transform 0.3s ease;
582 z-index: 9999;
583 padding: 60px 25px 40px 25px;
584 overflow-y: auto;
585 display: block;
586 }
587 .sidebar-on-mobile .eel-nav-menu-icon {
588 position: absolute;
589 right: 20px;
590 top: 20px;
591 font-size: 25px;
592 border: 1px solid rgba(0, 0, 0, 0.0392156863);
593 border-radius: 100%;
594 display: inline-grid;
595 place-content: center;
596 line-height: 36px;
597 width: 36px;
598 height: 36px;
599 cursor: pointer;
600 z-index: 999;
601 color: #121212;
602 }
603 .sidebar-on-mobile .eel-nav-menu .sub-arrow {
604 margin: 0;
605 display: none !important;
606 }
607
608 .sidebar-on-mobile .eel-nav-menu .sub-menu {
609 width: 100%;
610 }
611
612 .sidebar-on-mobile.eel-mobile-open-position-top {
613 transform: scaleY(0);
614 transform-origin: top;
615 max-width: 100%;
616 }
617
618 .sidebar-on-mobile.eel-mobile-open-position-top.easyel-open {
619 transform: scaleY(1);
620 }
621
622 .sidebar-on-mobile.eel-mobile-open-position-right {
623 transform: translateX(100%);
624 }
625
626 body.logged-in .sidebar-on-mobile {
627 padding: 80px 25px 40px 40px;
628 }
629 body.logged-in .sidebar-on-mobile .eel-nav-menu-icon {
630 top: 50px;
631 }
632
633 .sidebar-on-mobile li.menu-item a {
634 display: block;
635 padding: 14px 0;
636 max-width: 100%;
637 width: auto;
638 font-size: 20px;
639 line-height: 104%;
640 color: #0a0a0a;
641 }
642
643 .sidebar-on-mobile li + li a {
644 border-top: 1px solid rgba(0, 0, 0, 0.07);
645 }
646
647 .sidebar-on-mobile ul.easyel-mega--current li + li a {
648 border-top: none;
649 }
650
651 .sidebar-on-mobile .eel-nav-menu .menu-item-has-children .sub-menu {
652 display: none;
653 padding-left: 20px;
654 position: relative;
655 visibility: visible;
656 opacity: 1;
657 }
658
659 .sidebar-on-mobile .eel-nav-menu .menu-item-has-children .sub-menu.easyel-mega--current {
660 padding-left: 0;
661 }
662
663 .sidebar-on-mobile.eel-mobile-open-position-right.easyel-open {
664 transform: translateX(0);
665 }
666
667 .sidebar-on-mobile .unicon-chevron-down {
668 display: inline-grid !important;
669 height: 30px;
670 width: 30px;
671 cursor: pointer;
672 position: absolute;
673 right: 0;
674 place-content: center;
675 color: currentColor;
676 top: 7px;
677 transition: transform 0.3s ease;
678 }
679 .sidebar-on-mobile .unicon-chevron-down.active {
680 transform: rotate(180deg);
681 }
682
683 .sidebar-on-mobile ul.sub-menu li:not(.menu-item-has-children) .unicon-chevron-down {
684 display: none !important;
685 }