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

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