Ectaclick

Prelude-menu-responsive

Jan 26th, 2022 (edited)
884
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @font-face {
  2.     font-family: Raleway;
  3.     src: url(fonts/Raleway/Raleway-VariableFont_wght.ttf);
  4. }
  5.  
  6. :root {
  7.     --black: #09090a;
  8.     --primary: #2a4b9a;
  9.     --secondary: #3070fb;
  10.     --tertiary: #a7aaaf;
  11.  
  12.     --header-height: 70px;
  13. }
  14.  
  15. * {
  16.     box-sizing: border-box;
  17.     margin: 0;
  18.     padding: 0;
  19.     list-style: none;
  20.     text-decoration: none;
  21.     font-family: Raleway, serif;
  22. }
  23.  
  24. body {
  25.     background-color: green;
  26. }
  27.  
  28. header {
  29.     height: var(--header-height);
  30. }
  31.  
  32. pfe-navigation {
  33.     display: flex;
  34.     flex-direction: row;
  35.     justify-content: space-between;
  36.     align-items: center;
  37.     background-color: var(--black);
  38.     width: 100%;
  39.     height: var(--header-height);
  40.     padding: 0 4%;
  41. }
  42.  
  43. #contact-button {
  44.     margin-right: 30px;
  45.     padding: 10px;
  46.     color: white;
  47.     background-color: var(--primary);
  48.     border: none;
  49.     border-radius: 3px;
  50. }
  51.  
  52. #mobile-icon {
  53.     font-size: 30px;
  54. }
  55.  
  56. pfe-navigation-item:last-child {
  57.     display: flex;
  58.     flex-direction: row;
  59.     justify-content: center;
  60.     align-items: center;
  61. }
  62.  
  63. pfe-navigation-main ul li a, .pfe-link-list__header {
  64.     font-weight: 600;
  65. }
  66.  
  67. .mobile-icon {
  68.     color: white;
  69. }
  70.  
  71. @media only screen and (max-width: 1000px) {
  72.  
  73.     pfe-navigation-main {
  74.         display: none;
  75.     }
  76.  
  77.     #mobile-icon-open {
  78.         display: block;
  79.     }
  80.  
  81.     #mobile-icon-close {
  82.         display: none;
  83.     }
  84.  
  85.     pfe-navigation-main.mobile-expanded #mobile-icon-open {
  86.         display: none;
  87.     }
  88.  
  89.     pfe-navigation-main.mobile-expanded #mobile-icon-close {
  90.         display: block;
  91.     }
  92.  
  93.     pfe-navigation-main.mobile-expanded {
  94.         display: flex;
  95.         flex-direction: column;
  96.         align-items: center;
  97.         position: absolute;
  98.         top: calc(var(--header-height) + 2%);
  99.         left: 2%;
  100.         height: calc(100vh - (var(--header-height) + 4%));
  101.         width: calc(100vw - 4%);
  102.         padding: 2% 8%;
  103.         background-color: white;
  104.         border-radius: 8px;
  105.     }
  106.  
  107.     .pfe-navigation-item__container {
  108.         display: none;
  109.     }
  110.  
  111.     pfe-navigation-main ul {
  112.         width: 50%;
  113.     }
  114.  
  115.     pfe-navigation-main ul li {
  116.         position: relative;
  117.         margin: 5% 0;
  118.     }
  119.  
  120.     .pfe-navigation-item__container[aria-expanded="true"] {
  121.         position: relative;
  122.         display: flex;
  123.         flex-direction: column;
  124.         top: 10px;
  125.         left: 0;
  126.     }
  127.  
  128.     pfe-navigation-main ul li a {
  129.         color: black;
  130.     }
  131.  
  132.     .pfe-navigation-item-grid {
  133.         margin-left: 5%;
  134.     }
  135.  
  136.     .pfe-link-list__group-item a {
  137.         color: gray;
  138.     }
  139.  
  140.     .submenu-icon {
  141.         position: absolute;
  142.         top: 5px;
  143.         right: 5px;
  144.         font-weight: 600;
  145.     }
  146.  
  147.     #estimate {
  148.         display: none;
  149.     }
  150.  
  151. }
  152.  
  153. @media only screen and (min-width: 1000px) {
  154.  
  155.     .mobile-icon {
  156.         display: none;
  157.     }
  158.  
  159.     .submenu-icon {
  160.         display: none;
  161.     }
  162.  
  163.     pfe-navigation {
  164.         position: relative;
  165.         border-bottom: 1px solid grey;
  166.     }
  167.  
  168.     pfe-navigation-main {
  169.         width: 50%;
  170.     }
  171.  
  172.     pfe-navigation-main ul {
  173.         display: flex;
  174.         flex-direction: row;
  175.         justify-content: space-around;
  176.     }
  177.  
  178.     pfe-navigation-main ul li a {
  179.         position: relative;
  180.         font-weight: 500;
  181.         color: white;
  182.     }
  183.  
  184.     pfe-navigation-main > ul > li > a::after {
  185.         content: '';
  186.         transform-origin: 0 0;
  187.         transform: scaleX(0);
  188.         position: absolute;
  189.         bottom: -2px;
  190.         left: 0;
  191.         right: 0;
  192.         height: .2em;
  193.         background-color: white;
  194.         opacity: 0.8;
  195.         transition: transform .3s;
  196.     }
  197.  
  198.     pfe-navigation-main > ul > li > a:hover::after {
  199.         transform: scaleX(1);
  200.     }
  201.  
  202.     .pfe-navigation-item__container {
  203.         display: none;
  204.     }
  205.  
  206.     .pfe-navigation-item__container[aria-expanded="true"] {
  207.         display: flex;
  208.         flex-direction: column;
  209.         position: absolute;
  210.         top: var(--header-height);
  211.         left: 15%;
  212.         background-color: var(--black);
  213.         border-radius: 0 0 5px 5px;
  214.     }
  215.  
  216.     .pfe-navigation-item-grid {
  217.         display: grid;
  218.         grid-column-gap: 30px;
  219.         grid-row-gap: 10px;
  220.         grid-template-columns: repeat(var(--column-count), 1fr);
  221.         padding: 1% 2%;
  222.     }
  223.  
  224.     .pfe-link-list__group-item a:hover {
  225.         color: #2A4B9A;
  226.     }
  227.  
  228.     .pfe-link-list__header {
  229.         color: white;
  230.         margin-bottom: 8%;
  231.     }
  232.  
  233.     .pfe-navigation-grid__column .pfe-link-list__group {
  234.         display: flex;
  235.         flex-direction: column;
  236.     }
  237.  
  238.     .pfe-navigation-item__footer {
  239.         display: flex;
  240.         flex-direction: row;
  241.         justify-content: center;
  242.         align-items: center;
  243.         position: relative;
  244.         bottom: 0;
  245.         left: 0;
  246.         right: 0;
  247.         color: black;
  248.         background-color: var(--tertiary);
  249.         border-radius: 0 0 5px 5px;
  250.         padding: 2% 0;
  251.     }
  252.  
  253.     #new-button {
  254.         margin-right: 30px;
  255.         padding: 10px;
  256.         color: white;
  257.         background-color: var(--secondary);
  258.         border: none;
  259.         border-right: 30px;
  260.         border-radius: 3px;
  261.         cursor: pointer;
  262.     }
  263. }
  264.  
  265.  
RAW Paste Data Copied