Mega Menu with Icon + Description
Mon Oct 24 2022 07:49:39 GMT+0000 (Coordinated Universal Time)
/* * Services Menu Properties * Please change the variable value below to update * icon and description on the Services menu */ // Icons $fractional-cto: '/wp-content/uploads/2022/10/submenu-fractional.svg'; $app-web: '/wp-content/uploads/2022/10/submenu-web.svg'; $software-qa: '/wp-content/uploads/2022/10/submenu-software.svg'; $fractional-product: '/wp-content/uploads/2022/10/submenu-product.svg'; $outsourced-developer: '/wp-content/uploads/2022/10/submenu-developer.svg'; $talent-recruiting: '/wp-content/uploads/2022/10/submenu-staffing.svg'; // Description $fractional-cto-desc: "Get on-demand access to a CTO to help guide your technical vision, accelerate team-building, and improve development team operations."; $app-web-desc: "Whether you’re a startup building new products or an established business upgrading existing systems, we help deliver positive outcomes."; $software-qa-desc: "Accelerate development, streamline release cycles, and eliminate roadblocks with fully-managed software testing & QA services."; $fractional-product-desc: "Get on-demand access to a product expert to help design UX, plan & prioritize your roadmap, and manage development schedules."; $outsourced-developer-desc: "Increase your development capacity & reduce administrative workloads with pre-trained engineers that are ready to deploy within weeks."; $talent-recruiting-desc: "Scale your development team & simplify the talent acquisition process with top-caliber candidates that are pre-vetted by our team."; /* Header */ header{ &.fl-theme-builder-header-scrolled{ background-color: #FFF; box-shadow: 0 1px 25px rgb(57 63 72 / 10%); } &.fl-theme-builder-header-shrink{ ul.menu >{ li{ padding: 25px 0; } } } ul.menu >{ li{ padding-top: 30px; padding-bottom: 30px; &.menu-item-has-children{ .menu-item-text{ .pp-menu-toggle{ right: -7px !important; transition: all .3s ease-in-out; } } &:hover{ .menu-item-text{ .pp-menu-toggle{ transform: rotate(180deg); } } } } & >{ a{ } .pp-has-submenu-container >{ a{ } } ul.sub-menu{ padding: 30px !important; transform: translateX(-40%); display: grid !important; grid-template-columns: 1fr 1fr; row-gap: 30px; column-gap: 40px; & >{ li{ & > { a{ display: grid; grid-template-columns: 26px auto; grid-template-rows: auto; column-gap: 20px; grid-template-areas: "icon menu" "icon description"; transition: all .3s ease-in-out; .menu-item-text{ grid-area: menu; line-height: 1.25; } .menu-desc{ font-size: 14px; font-weight: 300; grid-area: description; margin-bottom: 0; margin-top: 5px; color: #7E7E7E !important; } .menu-image{ background-repeat: no-repeat; background-size: contain; width: 27px; height: auto; grid-area: icon; } } } &:hover{ } // &:not(:first-child){ // margin-top: 25px; // } @each $name, $glyph in $menu-image { &.submenu-#{$name}{ .menu-image{ background-image: url($glyph); } } } @each $name, $glyph in $menu-description { &.submenu-#{$name}{ .menu-desc{ &::before{ content: $glyph; } } } } } } @media(min-width: $min-mobile){ &::before{ position: absolute; width: 0; height: 0; content: ""; border-style: solid; border-width: 15px 0 15px 15px; border-color: transparent transparent transparent #FFF; right: unset!important; top: -20px !important; left: 45% !important; transform: rotate(270deg)!important; } } @media(max-width: $tablet){ transform: translateX(-30%); &::before{ left: 33% !important; } } } } &.current-page-ancestor >{ a{ color: $jt-blue !important; } ul.sub-menu >{ li.current-menu-item >{ a{ } } } .pp-has-submenu-container >{ a{ color: $jt-blue !important; .pp-menu-toggle::before{ border-color: $jt-blue; } } } } &.jt-active >{ a{ color: #1A8CFF !important; } } &.pp-has-submenu.pp-menu-submenu-right{ .sub-menu { right: unset !important; } } &.menu-company, &.menu-resources{ ul.sub-menu{ width: 386px; } } } } } nav.pp-menu-nav{ .pp-social-icons{ span.pp-social-icon{ margin-right: 20px; a{ font-size: 20px; @each $name, $glyph in $social-icons { i.fa-#{$name}{ color: $glyph; } } } } } }
Comments