Sid Gifari Advanced File Manager

✏️ Editing: menu.scss

.pxl-nav-menu {

/* First Level */
	.pxl-menu-primary > li {
		&.menu-item-has-children > a {
			.pxl-arrow-plus {
				display: inline-flex;
				@include transition(all 300ms linear 0ms);
				&:before {
					content: '+';
					font-style: normal;
				}
			}
			.pxl-arrow-arrow {
				display: inline-flex;
				line-height: normal;
				@include transition(all 300ms linear 0ms);
				&:before {
					content: "\f150";
					font-family: "Caseicon";
					font-size: 10px;
					font-style: normal;
				}
			}
		}
	}

/* Style Level First */
	.pxl-menu-item-text {
		position: relative;
	}
	&.fr-style-divider {
		.pxl-menu-primary > li {
			margin: 0 8px;
			> a {
				padding: 0 8px;
				&:before, &:after {
					content: '';
					height: 7px;
					width: 100%;
					position: absolute;
					@include transition(all 300ms linear 0ms);
					opacity: 0;
					z-index: 102;
				}			
				&:before {
					bottom: 1px;
					background-color: #{'rgba(var(--primary-color-rgb),0.48)'};
					left: -24px;
				}
				&:after {
					bottom: -6px;
					background-color: $primary_color;
					right: -24px;
				}
			}
			> a.pxl-onepage-active,
			&:hover > a,
	        &.current_page_item > a,
	        &.current-menu-item > a,
	        &.current_page_ancestor > a,
	        &.current-menu-ancestor > a {
	        	&:before {
	        		opacity: 1;
	        		left: 0;
	        	}
	        	&:after {
	        		right: 0;
	        		opacity: 1;
	        	}
		    }
		}
	}

&.fr-style-divider2 {
		.pxl-menu-primary > li {
			margin: 0 8px;
			> a .pxl-menu-item-text:before {
				content: '';
				height: 6px;
				width: 0%;
				left: 0;
				right: 0;
				margin: 0 auto;
				position: absolute;
				@include transition(all 300ms linear 0ms);
				opacity: 0;
				background-color: $primary_color;
				top: 50%;
				margin-top: 19px;
			}
			> a.pxl-onepage-active,
			&:hover > a,
	        &.current_page_item > a,
	        &.current-menu-item > a,
	        &.current_page_ancestor > a,
	        &.current-menu-ancestor > a {
	        	.pxl-menu-item-text:before {
	        		width: 100%;
	        		opacity: 1;
	        	}
		    }
		}
	}

&.fr-style-arrow {
		.pxl-menu-primary > li {
			> a {
				color: #050B1D;
				&:before {
					content: '';
					width: 0;
					height: 0;
					border-width: 12px;
					border-style: solid;
					border-color: transparent transparent $primary_color transparent;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
					@include transition(all 300ms linear 0ms);
					opacity: 0;
				}
			}
			> a.pxl-onepage-active,
			&:hover > a,
	        &.current_page_item > a,
	        &.current-menu-item > a,
	        &.current_page_ancestor > a,
	        &.current-menu-ancestor > a {
	        	color: $primary_color;
	        	&:before {
	        		opacity: 1;
	        	}
	        }
		}
	}

&.fr-style-box {
		.pxl-menu-primary > li {
			margin: 0;
			> a {
				.pxl-menu-item-text {
					display: inline-block;
					padding: 0 19px;
					z-index: 1;
					&:before {
						content: '';
						height: 40px;
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
						background-color: $primary_color;
						z-index: -1;
						@include transition(all 300ms linear 0ms);
						transform: scaleY(-1);
						opacity: 0;
					}
				}
			}
			> a.pxl-onepage-active,
			&:hover > a,
	        &.current_page_item > a,
	        &.current-menu-item > a,
	        &.current_page_ancestor > a,
	        &.current-menu-ancestor > a {
	        	color: #fff;
	        	.pxl-menu-item-text:before {
	        		opacity: 1;
	        		transform: scaleY(1);
	        	}
	        }
		}
	}

&.fr-style-gradient {
		.pxl-menu-primary > li {
			margin: 0;
			> a {
				.pxl-menu-item-text {
					display: inline-block;
					padding: 0 24px;
					z-index: 1;
					&:before {
						content: '';
						height: 41px;
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
						@include background-horizontal($gradient_color_from, $gradient_color_to);
						z-index: -1;
						@include transition(all 300ms linear 0ms);
						transform: scaleY(-1);
						opacity: 0;
						border-radius: 41px;
					}
				}
			}
			> a.pxl-onepage-active,
			&:hover > a,
	        &.current_page_item > a,
	        &.current-menu-item > a,
	        &.current_page_ancestor > a,
	        &.current-menu-ancestor > a {
	        	color: #fff;
	        	.pxl-menu-item-text:before {
	        		opacity: 1;
	        		transform: scaleY(1);
	        	}
	        }
		}
	}

/* Sub Menu */
	.sub-menu li.menu-item-has-children > a:after {
		content: "\f14d";
		position: absolute;
		top: 50%;
		right: 24px;
		@include transform(translate(0, -50%));
		font-size: 10px;
		font-family: "Caseicon";
		font-weight: 400;
	}

@media #{$min-xl} {
		&.sub-style-default {
			.sub-menu > li {
				.pxl-menu-item-text {
					@include transition(all 200ms linear 0ms);
					&:before {
						content: '';
						position: absolute;
						top: 50%;
						@include transform(translateY(-50%));
						height: 1px;
						width: 12px;
						background-color: #fff;
						border-radius: 2px;
						@include transition(all 200ms linear 0ms);
						opacity: 0;
						left: -10px;
					}
				}
				> a.pxl-onepage-active,
				&:hover > a,
		        &.current_page_item > a,
		        &.current-menu-item > a,
		        &.current_page_ancestor > a,
		        &.current-menu-ancestor > a {
		        	.pxl-menu-item-text {
		        		padding-left: 22px;
		        		&:before {
		        			left: 0;
		        			opacity: 1;
		        		}
		        	}
			    }
			}
		}
	}

&.show-effect-fade {
		.pxl-menu-primary .sub-menu {
			margin-top: 0;
		}
	}

&.show-effect-dropdown {
		.pxl-menu-primary {
			.sub-menu {
				@include transform(scaleY(0));
				transform-origin: 0 0 0;
				-webkit-transform-origin: 0 0 0;
				-ms-transform-origin: 0 0 0;
				-o-transform-origin: 0 0 0;
				margin-top: 0;
			}
			li:hover > .sub-menu, li.focus > .sub-menu {
				@include transform(scaleY(1));
			}
		}
	}

&.show-effect-slidedown {
		.pxl-menu-primary {
			.sub-menu {
				margin-top: 0;
				transform: perspective(500px) rotateX(-20deg);
				transform-origin: 50% 0%;
			}
			li:hover > .sub-menu, li.focus > .sub-menu {
				transform: perspective(500px) rotateX(0deg);
			}
		}
	}

&.pxl-nav-vertical {
		.sub-menu {
			position: static;
			opacity: 1;
			visibility: visible;
			box-shadow: none;
			padding: 0;
			text-align: inherit;
			background-color: transparent;
			margin: 0;
			padding-top: 18px;
			display: none;
			transition: none;
			min-width: auto;
			> li {
				padding: 0;
				> a {
					padding: 0;
					display: inline-block;
					font-weight: 400;
					font-size: 19px;
					color: rgba(#000, 0.54);
					border: none;
					&:hover {
						color: $primary_color;
					}
				}
				+ li {
					margin-top: 12px;
				}
			}
			li:hover > .sub-menu {
				margin-top: 0 !important;
			}
		}
		.pxl-menu-primary > li {
			display: block;
			margin: 0;
			> a {
				line-height: normal;
			}
		}
		&.vertical-style-default {
			.pxl-arrow-toggle {
				position: absolute;
				right: -40px;
				top: 50%;
				transform: translate(0, -50%);
				font-size: 80%;
				width: 40px;
				height: 40px;
				display: inline-flex;
				@include transition(all 300ms linear 0ms);
				opacity: 0;
				align-items: center;
			}
			.pxl-menu-primary {
				padding: 0 50px;
				> li {
					+ li {
						margin-top: 30px;
					}
					> a {
						line-height: normal;
						font-size: 36px;
						text-transform: uppercase;
						color: #141414;
						font-weight: 500;
						.caseicon-angle-arrow-down {
							display: none !important;
						}
					}
				}
				li {
					&.menu-item-has-children > a:hover {
						.pxl-arrow-toggle {
							opacity: 1;
							right: -60px;
						}
					}
				}
			}
		}
		&.vertical-style-button {
			.pxl-arrow-toggle {
				display: none;
			}
			.pxl-menu-primary {
				> li {
					> a {
						min-width: 145px;
						font-size: 18px;
						line-height: 60px;
						color: #040607;
						z-index: 1;
						@media #{$max-xl} {
							font-size: 16px;
							line-height: 51px;
						}
						&:before, &:after {
							content: '';
							position: absolute;
							width: 31px;
							height: 27px;
							border-color: $primary_color;
							border-style: solid;
							@include transition(all 300ms linear 0ms);
						}
						&:before {
							top: 0;
							left: 0;
							border-radius: 8px 0 0 0;
							border-width: 3px 0 0 3px;
							transform-origin: top left;
							@media #{$max-xl} {
								border-width: 2px 0 0 2px;
							}
						}
						&:after {
							border-radius: 0 0 8px 0px;
							border-width: 0 3px 3px 0;
							right: 0;
							bottom: 0;
							transform-origin: bottom right;
							@media #{$max-xl} {
								border-width: 0 2px 2px 0;
							}
						}
						.pxl-menu-item-text {
							position: static;
							&:before {
								@include transition(all 300ms linear 0ms);
								content: '';
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								border-radius: 8px;
								z-index: -1;
								background-color: $primary_color;
								transform: scaleY(0);
							}
						}
						&:hover {
							&:before, &:after {
								transform: scale(0);
							}
							.pxl-menu-item-text:before {
								transform: scaleY(1);
							}
						}
					}
					+ li {
						margin-top: 22px;
						@media #{$max-xl} {
							margin-top: 12px;
						}
					}
					.sub-menu {
						margin-bottom: 36px;
					}
				}
				li.menu-item-has-children > a .pxl-menu-item-text:after {
					content: '+';
					margin-left: 4px;
				}
			}
			.sub-menu > li {
				> a {
					color: #555;
					font-size: 16px;
					font-weight: 700;
					&:after {
						display: none;
					}
					&:hover {
						color: $primary_color;
					}
				}
				.sub-menu > li > a {
					color: #777;
					font-size: 15px;
					&:hover {
						color: $primary_color;
					}
				}
			}
		}
	}
	&.pxl-mega-boxed {
		.pxl-megamenu > .sub-menu {
			padding: 20px 15px 15px 15px;
			max-width: 1170px;
		}
	}

}

@media #{$min-xl} {
	#pxl-header-default {
		.pxl-menu-primary > li {
			margin: 0 1px;
			> a {
				span {
					line-height: 37px;
					display: inline-flex;
					padding: 0 22px;
					align-items: center;
					position: relative;
					z-index: 1;
					&:before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						height: 100%;
						width: 100%;
						background-color: $secondary_color;
						z-index: -1;
						@include transition(all .25s cubic-bezier(.645,.045,.355,1));
						transform: scaleY(0);
						transform-origin: bottom center;
					}
				}
			}
			&:hover > a,
	        &.current_page_item > a,
	        &.current-menu-item > a,
	        &.current_page_ancestor > a,
	        &.current-menu-ancestor > a {
	        	color: $primary_color;
	        	span:before {
	        		transform: scaleY(1);
	        	}
		    }
		}
	}
}

body.rtl {
	@media #{$min-xl} {
		.pxl-nav-menu.sub-style-default .sub-menu > li .pxl-menu-item-text::before {
			left: auto;
			right: -10px;
		}
		.pxl-nav-menu.sub-style-default .sub-menu > li > a.pxl-onepage-active .pxl-menu-item-text, .pxl-nav-menu.sub-style-default .sub-menu > li:hover > a .pxl-menu-item-text, .pxl-nav-menu.sub-style-default .sub-menu > li.current_page_item > a .pxl-menu-item-text, .pxl-nav-menu.sub-style-default .sub-menu > li.current-menu-item > a .pxl-menu-item-text, .pxl-nav-menu.sub-style-default .sub-menu > li.current_page_ancestor > a .pxl-menu-item-text, .pxl-nav-menu.sub-style-default .sub-menu > li.current-menu-ancestor > a .pxl-menu-item-text {
			padding-left: 0;
			padding-right: 22px;
			&:before {
				right: 0;
			}
		}
	}
}

📁 File Manager Pro