header { width:100%; text-align:center; font-family: 'Bai Jamjuree', sans-serif; font-weight:900; font-size: 50px; color: #eee; display:none; } header li:first-child { margin-right: auto; } header li:last-child { margin-left: auto; } header ul { padding-top: 15px; padding-bottom: 15px; padding-left: 20px; padding-right: 20px; margin: 0px; display: flex; flex-direction: row; justify-content: center; align-items: center; } header li { display: flex; margin: 0px; padding-right: 45px; padding-left: 45px; } /* The Overlay (background) */ .nav-overlay { /* Height & width depends on how you want to reveal the nav-overlay (see JS below) */ height: 200%; width:200%; position: fixed; /* Stay in place */ z-index: 100; /* Sit on top */ right: 0; top: 0; background-color: rgb(63, 50, 97); /* Black fallback color */ clip-path: polygon(100% 0, 0 0, 100% 100%); transform: translateX(100%); background: -webkit-linear-gradient(to bottom, #C06C84, #6C5B7B, #355C7D, #000000); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #C06C84, #6C5B7B, #355C7D, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background-size:100% 100%; background-repeat: no-repeat; background-position:30% 30%; /*OR top left*/ overflow:hidden; display:none; } .navSlideIn { animation:navSlideIn 0.8s infinite linear; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes navSlideIn { 0% { transform: translateX(150%); } 100% { transform: translateX(0%); } } .navSlideOut { animation:navSlideOut 0.8s infinite linear; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes navSlideOut { 0% { transform: translateX(0%); } 100% { transform: translateX(100%); } } /* Position the content inside the nav-overlay */ .nav-overlay-content { display: grid; grid-template-columns: 1fr; grid-auto-rows:minmax(180px, auto); align-items: center; justify-items: center; position:absolute; width:95%; z-index:400; top: 50%; transform: translateY(-50%); visibility: hidden; } /* The navigation links inside the nav-overlay */ .nav-overlay-content a { text-align:center; z-index:180; text-decoration: none; font-size: 8vw; font-family: 'Bai Jamjuree', sans-serif; color: #FFFFFF; line-height:0; padding:0; margin:0; display:none; animation:menuItemShadowDown 0.5s infinite ease-in-out; animation-iteration-count: 1; animation-fill-mode: forwards; } /*Required to populate 3 rows so the nav doesn't pop as it grows*/ .nav-overlay-content a:nth-child(1) { grid-row:1; } .nav-overlay-content a:nth-child(2) { grid-row:2; } .nav-overlay-content a:nth-child(3) { grid-row:3; } /* When you mouse over the navigation links, change their color */ .nav-overlay-content a:hover, .nav-overlay a:focus { color: #f1f1f1; animation:menuItemShadowUp 0.5s infinite ease-in-out; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes menuItemShadowUp { 0% { text-shadow: none; } 100% { text-shadow: 0 -10px 0 #C06C84; } } @keyframes menuItemShadowDown { 0% { text-shadow: 0 -10px 0 #C06C84; } 100% { text-shadow: none; } } /*Apply to to prevent scrolling*/ .noscroll { overflow: hidden; } /* Position the close button (top right corner) */ .nav-overlay .closebtn { position: fixed; top: 25px; right: 45px; z-index:150; } .closebtn { text-decoration:none; color:white; font-family: 'Bai Jamjuree', sans-serif; font-size: 3vw; font-weight:700; transition-duration: 0.5s; } .closebtn:hover { text-shadow: 0 -7px 0 #555a7a; } /*Triangle button SVG */ #menu_btn svg { width:49.2px; height:42.43px; } /*Triangle button menu button fill*/ .polyline_menu_btn_original { fill:none; } /*Main triangle menu button */ .menu_btn_anim { animation: menu_btn-animation 16s infinite; transition: 4s; animation-direction: alternate; transition-property: fill; } @keyframes menu_btn-animation { 0% { fill: url('#menu_btn-gradient1'); stroke: #67daff; } 33% { fill: url('#menu_btn-gradient2'); stroke: #a6e22e; } 66% { fill: url('#menu_btn-gradient3'); stroke: #67daff; } 100% { fill: url('#logo-gradient4'); stroke: #f92672 } } @media (min-width: 800px) and (max-width: 1199px) { .nav-overlay-content a { font-size: 8vw; } .link_wrapper { min-height:70px; } .nav-overlay-content { grid-auto-rows:minmax(80px, auto); } .closebtn { font-size: 8vw; } } @media (min-width:451px) and (max-width: 799px) { #menu_btn svg { width:39.2px; height:33.94px; } .nav-overlay-content a { font-size: 10vw; } .nav-overlay-content { grid-auto-rows:minmax(80px, auto); } .closebtn { font-size: 8vw; } } @media (max-width: 450px) { #menu_btn svg { width:37.25px; height:32.24px; } header { padding-top:20px; padding-bottom:20px; font-size: 30px; } header ul { padding:0px; } .nav-overlay-content a { font-size: 20vw; } .link_wrapper { min-height:80px; } .nav-overlay-content { grid-auto-rows:minmax(100px, auto); } .closebtn { font-size: 11vw; } }