API tools faq
paste
Advertisement
MikkoDC

Etherio Mega Menu

MikkoDC
Nov 13th, 2023
18
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.60 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3. #mega-menu-wrap-main-navigation {
  4. &.mega_menu_is_open {
  5. .mobile_cta {
  6. @include breakpoint(lg) {
  7. display: flex;
  8. width: 100%;
  9. }
  10. }
  11. }
  12. }
  13. // Top Level Menu
  14. // #mega-menu-wrap-main-navigation #mega-menu-main-navigation > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  15. // #mega-menu-wrap-main-navigation #mega-menu-main-navigation > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
  16. // #mega-menu-wrap-main-navigation #mega-menu-main-navigation > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link {
  17. // background: rgba(6, 188, 193, 0.08) !important;
  18. // border-radius: 3px !important;
  19. // }
  20.  
  21.  
  22. // Flyout Menus
  23. #mega-menu-wrap-main-navigation #mega-menu-main-navigation {
  24. & > li.mega-menu-flyout > ul.mega-sub-menu {
  25. background: #F9F9F9;
  26. border-radius: 3px!important;
  27. display: block;
  28. margin-top: 0;
  29. padding: 0;
  30. text-align: left;
  31. width: 130%!important;
  32. left: 50%;
  33. transform: translateX(-49%)!important;
  34.  
  35. li.mega-menu-item {
  36. display: flex;
  37. align-items: center;
  38. float: none;
  39. padding: 0;
  40. margin: 0;
  41. position: relative;
  42. a.mega-menu-link {
  43. background: #ffffff;
  44. color: #4B5353 !important;
  45. font-weight: 500 !important;
  46. font-size: 14px;
  47. line-height: 14px;
  48. display: block;
  49. width: 100%;
  50. max-width: 100%;
  51. white-space: normal;
  52. word-wrap: break-word;
  53. padding: 14px 16px;
  54. margin: 2px;
  55. border-radius: 3px;
  56.  
  57. &:hover {
  58. background: #0C263E;
  59. color: #ffffff !important;
  60. }
  61. }
  62. }
  63. li.mega-menu-item:last-child a.mega-menu-link{
  64. border-bottom: 0;
  65. }
  66. }
  67.  
  68. & > li.mega-menu-megamenu > ul.mega-sub-menu {
  69. padding: 10px!important;
  70. }
  71. }
  72.  
  73.  
  74. #mega-menu-wrap-main-navigation,
  75. .mega-menu-wrap {
  76.  
  77. @media screen and (min-width: 769px) {
  78. background: transparent !important;
  79. }
  80.  
  81. ul, li {
  82. padding:0 !important;
  83. }
  84.  
  85.  
  86. #mega-menu-main-navigation {
  87.  
  88. @include breakpoint(lg) {
  89. margin-top: 25px;
  90. height:100vh;
  91. overflow: auto;
  92. z-index: 888888 !important;
  93.  
  94. &:after {
  95. background:$white;
  96. content:"" !important;
  97. display: block !important;
  98. position: absolute;
  99. left: 0;
  100. bottom:-100%;
  101. height:100%;
  102. width: 100%;
  103. z-index: -1;
  104. }
  105. }
  106.  
  107. &.open_sub_menu {
  108. @include breakpoint(lg) {
  109. overflow: auto;
  110. }
  111. }
  112.  
  113.  
  114.  
  115.  
  116. }
  117.  
  118. #mega-menu-main-navigation{
  119.  
  120.  
  121. .mega-menu-row {
  122. margin-bottom: 2px!important;
  123. // background: transparent !important;
  124. // padding: 10px 0!important;
  125.  
  126. // &:not(:last-child) {
  127. // border-bottom: 1px solid rgba( $body_color, 0.3)!important;
  128. // }
  129.  
  130.  
  131. // @include breakpoint(lg) {
  132. // margin-top:0 !important;
  133. // }
  134.  
  135.  
  136. & > ul.mega-sub-menu {
  137. display: flex !important;
  138. position: relative;
  139. padding: 0px!important;
  140. grid-gap: 2px;
  141.  
  142. // @media screen and (max-width: 1439px) and (min-width: 768px) {
  143. // padding: 12px 12px !important;
  144. // }
  145.  
  146.  
  147. @include breakpoint(lg) {
  148. flex-wrap: wrap;
  149. box-shadow: none !important;
  150. background: #F4F4F4;
  151. border-radius: 5px;
  152. width: 90%;
  153. margin: 0 auto;
  154. float: none;
  155. }
  156.  
  157. ul.menu {
  158. display: block !important;
  159. transform: none !important;
  160. position: static;
  161. background: transparent;
  162.  
  163. li {
  164. padding:0 !important;
  165. border:0 !important;
  166.  
  167. &:before,
  168. &:after {
  169. display: none !important;
  170. }
  171.  
  172. &:first-child {
  173. a {
  174. border-top: 1px solid #D9D9D9;
  175. }
  176. }
  177. a {
  178. width: 100%;
  179. font-weight: 700 !important;
  180. font-size: 14px;
  181. line-height: 28px;
  182. color: #3A676C !important;
  183. border-bottom: 1px solid #D9D9D9;
  184. border-top:0;
  185. padding: 6px 0;
  186. }
  187. }
  188. }
  189. & > li.mega-menu-column {
  190. // background: #FFFFFF;
  191. // border-radius: 6px;
  192. // padding:40px 53px !important;
  193.  
  194. @media screen and (max-width: 1439px) and (min-width: 768px) {
  195. // padding:20px !important;
  196. }
  197.  
  198. @include breakpoint(lg) {
  199. padding:10px 20px!important;
  200. border-bottom: 2px solid #DBDDE6;
  201. margin-bottom:0;
  202.  
  203. &:last-child {
  204. border-bottom: 0;
  205. margin-bottom:0;
  206. }
  207. }
  208. }
  209. li.mega-menu-item {
  210. @include breakpoint(lg) {
  211. padding:0!important;
  212. }
  213. @include breakpoint(xs) {
  214. padding: 0 !important;
  215. }
  216.  
  217. a.mega-menu-link {
  218. text-transform: none!important;
  219. font-size: 14px;
  220. font-weight: 500!important;
  221. line-height: 14px;
  222. color: $primary__color!important;
  223.  
  224. &:hover {
  225. color: $primary__color!important;
  226. }
  227. }
  228.  
  229. .textwidget {
  230. p {
  231. font-size: 12px!important;
  232. line-height: 1.25em!important;
  233. margin-bottom: 0!important;
  234. margin-top: 5px!important;
  235. }
  236. }
  237. }
  238. }
  239.  
  240.  
  241. }
  242.  
  243.  
  244.  
  245. & > li.mega-menu-item {
  246. margin:0 8.5px;
  247.  
  248. @include breakpoint(lg) {
  249. padding:0 !important;
  250. background: #fff;
  251. }
  252.  
  253.  
  254. & > a.mega-menu-link {
  255. background: transparent !important;
  256. font-family: $font__secondary;
  257. color: #4B5353!important;
  258. font-weight: 500 !important;
  259. font-size: 12px;
  260. line-height: 24px;
  261. text-transform: inherit;
  262. display: flex;
  263. justify-content: center;
  264. align-items: center;
  265. opacity: 1 !important;
  266. padding: 10px 10px!important;
  267. height: auto !important;
  268. display: inline-block;
  269. position: relative;
  270.  
  271. @include breakpoint(lg) {
  272. display: flex;
  273. align-items: center;
  274. justify-content: flex-start;
  275. width: 100%;
  276. padding: 0 20px;
  277. opacity: 1 !important;
  278. }
  279. @include breakpoint(xs) {
  280. padding: 25px 20px;
  281. }
  282.  
  283.  
  284. &:before {
  285. display: inline-block !important;
  286. content: '' !important;
  287. width: 0;
  288. height: 0;
  289. right: 4px;
  290. top: 17px;
  291. transition: all ease-in-out .15s;
  292. -webkit-transform: rotate(45deg);
  293. transform: rotate(45deg);
  294. border: solid #4B5353 !important;
  295. border-width: 0 1.5px 1.5px 0 !important;
  296. padding: 2.5px;
  297. position: absolute;
  298. }
  299.  
  300. &:hover {
  301. background: rgba(141, 141, 141, 0.16)!important;
  302. border-radius: 4px !important;
  303. cursor: pointer!important;
  304. }
  305.  
  306. & > span.mega-indicator {
  307. display: none !important;
  308. }
  309.  
  310.  
  311. }
  312.  
  313. & > .mega-sub-menu {
  314. border-radius: 3px !important;
  315. margin-top:15px;
  316.  
  317.  
  318. @include breakpoint(lg) {
  319. padding: 0 !important;
  320. }
  321.  
  322.  
  323. }
  324.  
  325. &.mega-toggle-on {
  326. & > a.mega-menu-link {
  327.  
  328. // background: rgba(6, 188, 193, 0.08) !important;
  329. // border-radius: 3px !important;
  330.  
  331. & > span.mega-indicator {
  332.  
  333. display: none !important;
  334.  
  335. // &:after {
  336. // display: inline-block !important;
  337. // content: '' !important;
  338. // width: 0;
  339. // height: 0;
  340. // right: -4px;
  341. // top: 9px;
  342. // transition: all ease-in-out 150ms;
  343. // padding: 2.3px;
  344. // transform: rotateZ(-135deg);
  345. // border: solid #A893D5 !important;
  346. // border-width: 0 2px 2px 0 !important;
  347. // }
  348. }
  349. }
  350. }
  351. }
  352.  
  353. & > li.mega-menu-item-has-children {
  354.  
  355. & > a.mega-menu-link {
  356. padding-right: 26px!important;
  357. position: relative;
  358. }
  359. }
  360.  
  361.  
  362. ul.mega-sub-menu {
  363.  
  364. li.menu-item {
  365. list-style: none;
  366. padding: 8px 0 !important;
  367. margin:0;
  368.  
  369. @include breakpoint(lg) {
  370. padding:0 !important
  371. }
  372.  
  373. &:last-child {
  374. margin-bottom:0;
  375. }
  376. }
  377.  
  378. li.mega-menu-column {
  379. padding: 24px 20px !important;
  380. width:100%;
  381. background-color: $white;
  382. border-radius: 3px;
  383.  
  384. &:last-child {
  385. border-right:0;
  386. }
  387.  
  388. &.border0 {
  389. border-right: 0;
  390. }
  391.  
  392. @include breakpoint(lg) {
  393. padding:0 !important;
  394. border-right: 0;
  395. }
  396.  
  397. h4.mega-block-title{
  398. font-size: 24px !important;
  399. line-height: 31px !important;
  400. color: #2B3A4F !important;
  401. font-family: $font__secondary !important;
  402. text-transform: capitalize !important;
  403. font-weight: 400 !important;
  404. margin-bottom: 15px !important;
  405.  
  406. @media screen and (max-width: 1439px) and (min-width: 768px) {
  407. margin-bottom: 5px !important;
  408. font-size: 21px !important;
  409. line-height: 31px !important;
  410. }
  411. }
  412.  
  413. .product_menus {
  414. .product_menu_item {
  415. margin-bottom: 25px !important;
  416.  
  417. &:last-child {
  418. margin-bottom: 0 !important;
  419. }
  420.  
  421. h4, h4 a {
  422. margin:0 !important;
  423. border-top:0 !important;
  424. font-weight: 500 !important;
  425. font-size: 18px !important;
  426. line-height: 23px !important;
  427. color: #2B3A4F !important;
  428. font-family: $font__main !important;
  429. position: relative;
  430. padding:10px 0 !important;
  431. text-transform: inherit !important;
  432. letter-spacing: 0 !important;
  433.  
  434. @media screen and (max-width: 1439px) and (min-width: 768px) {
  435. padding:8px 0 !important;
  436. font-size: 16px !important;
  437. line-height: 19px !important;
  438. }
  439. }
  440.  
  441. h4 {
  442.  
  443. margin:0 0 20px !important;
  444.  
  445. a {
  446. border-bottom: 1px solid #D9D9D9 !important;
  447.  
  448.  
  449. &:before {
  450. background: url('../../images/arrow-right-blue.svg')no-repeat center center;
  451. background-size: contain;
  452. content: "";
  453. position: absolute;
  454. display: block;
  455. right:0;
  456. top:50%;
  457. transform: translateY(-50%);
  458. width: 16px;
  459. height: 23px;
  460. }
  461.  
  462. }
  463. }
  464.  
  465. .item_details {
  466. display: flex;
  467. justify-content: space-between;
  468. align-items: center;
  469.  
  470. img {
  471. max-width: 208px;
  472.  
  473. @media screen and (max-width: 1439px) and (min-width: 768px) {
  474. max-width: 150px
  475. }
  476. }
  477.  
  478. p {
  479. font-weight: 400;
  480. font-size: 14px !important;
  481. line-height: 22px !important;
  482. padding-right: 35px;
  483. }
  484. }
  485.  
  486. }
  487. }
  488.  
  489. .product_menus {
  490.  
  491. &.primary_heading {
  492. .product_menu_list h4 a {
  493. color: $primary__color !important;
  494. }
  495. }
  496. .product_menu_list {
  497. margin-bottom: 10px !important;
  498.  
  499. @media screen and (max-width: 1439px) and (min-width: 768px) {
  500. margin-bottom: 0 !important;
  501. }
  502.  
  503. &:last-child {
  504. margin-bottom: 0 !important;
  505. }
  506.  
  507. &.border0 {
  508. h4 a {
  509. border-bottom: 0 !important;
  510. }
  511. }
  512.  
  513. &.normal_link {
  514. h4 {
  515. a {
  516. color: $blue2 !important;
  517.  
  518. &:before {
  519. display: none !important;
  520. }
  521. }
  522. }
  523. }
  524.  
  525. h4, h4 a {
  526. margin:0 !important;
  527. border-top:0 !important;
  528. font-weight: 500 !important;
  529. font-size: 18px !important;
  530. line-height: 23px !important;
  531. color: $blue2 !important;
  532. font-family: $font__main !important;
  533. position: relative;
  534. padding:10px 0 !important;
  535. text-transform: inherit !important;
  536. letter-spacing: 0 !important;
  537.  
  538. @media screen and (max-width: 1439px) and (min-width: 768px) {
  539. padding:8px 0 !important;
  540. font-size: 16px !important;
  541. line-height: 19px !important;
  542. }
  543. }
  544.  
  545. h4 {
  546.  
  547. margin:0 0 10px !important;
  548.  
  549. a {
  550. border-bottom: 1px solid #D9D9D9 !important;
  551.  
  552.  
  553.  
  554.  
  555. &:before {
  556. background: url('../../images/arrow-right-blue.svg')no-repeat center center;
  557. background-size: contain;
  558. content: "";
  559. position: absolute;
  560. display: block;
  561. right:0;
  562. top:50%;
  563. transform: translateY(-50%);
  564. width: 16px;
  565. height: 23px;
  566. }
  567.  
  568. }
  569. }
  570.  
  571.  
  572. .item_desc {
  573. p,a {
  574. font-weight: 400;
  575. font-size: 14px !important;
  576. line-height: 22px !important;
  577. color: $secondary__color !important;
  578. margin-bottom: 0 !important;
  579.  
  580. }
  581. }
  582.  
  583. }
  584. }
  585.  
  586. }
  587.  
  588. }
  589.  
  590.  
  591. // Third Level
  592. ul ul ul.mega-sub-menu ul.mega-sub-menu {
  593. & > li.mega-menu-item {
  594.  
  595. a.mega-menu-link {
  596. font-weight: 400!important;
  597. padding: 6px 0!important;
  598. // &:hover {
  599. // text-decoration: underline!important;
  600. // }
  601.  
  602. & > span.mega-indicator {
  603. display: block !important;
  604. position: relative;
  605. width: 24px !important;
  606. height: 24px !important;
  607.  
  608. &:before {
  609. font-size: 0;
  610. width: 1px !important;
  611. height: 10px !important;
  612. background-color: #444 !important;
  613. display: block;
  614. position: absolute;
  615. top: 6px;
  616. left: 12px;
  617. content: '';
  618. }
  619.  
  620. &:after {
  621. font-size: 0;
  622. width: 11px !important;
  623. height: 1px !important;
  624. background-color: #444 !important;
  625. display: block;
  626. position: absolute;
  627. top: 10px;
  628. left: 7px;
  629. }
  630. }
  631. }
  632.  
  633. &:not(:last-child) {
  634. & > a.mega-menu-link {
  635. border-bottom: 1px solid $color__border!important;
  636. }
  637.  
  638. }
  639.  
  640. // Fourth Level
  641. ul.mega-sub-menu {
  642. display: none;
  643. margin-left: 0!important;
  644. margin-top: 5px!important;
  645. & > li.mega-menu-item {
  646. a.mega-menu-link {
  647. font-weight: 400!important;
  648. padding: 0!important;
  649. color: $blue1!important;
  650. border: 0!important;
  651. &:hover {
  652. text-decoration: underline!important;
  653. }
  654. }
  655. }
  656.  
  657.  
  658. }
  659. &.mega-toggle-on {
  660.  
  661. a.mega-menu-link span.mega-indicator:before {
  662. display: none!important;
  663. }
  664.  
  665. ul.mega-sub-menu {
  666. display: block;
  667. }
  668. }
  669. }
  670. }
  671. }
  672. }
  673. .transparent_header .main-header:not(.sticky) {
  674.  
  675. #mega-menu-wrap-main-navigation #mega-menu-main-navigation > li.mega-menu-item > a.mega-menu-link, .mega-menu-wrap #mega-menu-main-navigation > li.mega-menu-item > a.mega-menu-link {
  676. color: $white!important;
  677. }
  678. #mega-menu-wrap-main-navigation #mega-menu-main-navigation > li.mega-menu-item > a.mega-menu-link:before, .mega-menu-wrap #mega-menu-main-navigation > li.mega-menu-item > a.mega-menu-link:before {
  679. border: solid #ffffff !important;
  680. border-width: 0 1.5px 1.5px 0!important;
  681. }
  682.  
  683. #mega-menu-wrap-main-navigation #mega-menu-main-navigation > li.mega-menu-item > a.mega-menu-link:hover, .mega-menu-wrap #mega-menu-main-navigation > li.mega-menu-item > a.mega-menu-link:hover {
  684. background: rgba($white, 0.1) !important;
  685. }
  686. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!