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

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