@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu'); * { box-sizing: border-box; text-decoration: none; } body { } header{ background: #66bfbf; position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; transition: 0.6s; padding: 10px 15px; z-index: 100000; font-family: Ubuntu; } header.sticky{ padding: 3px 50px; background: #66bfbf; opacity: 0.85; } header .logo{ font-family: "Ubuntu"; font-size: 2rem; font-weight: bold; position: relative; color: #fff; text-decoration: none; text-transform: lowercase; padding-left: 100px; transition: 0.6s; } header ul { position: relative; display: flex; justify-content: center; align-items: center; } header ul li { position: relative; list-style: none; } header ul li a { position: relative; margin: 5px 15px; text-transform: uppercase; color: #fff; letter-spacing: 2px; font-weight: 500px; padding: 5px 0; transition: 0.6s; } header ul li a:before{ position: absolute; content: ''; left:0; bottom: 0; height: 15px; width:100%; background: #ffffff; transform: scaleX(0); transform-origin: right; transition: transform .4s linear; } header ul li a:hover:before{ transform: scaleX(1); transform-origin: left; } header.sticky ul li a{ color: #fff; } .checkbtn { color:white; font-size: 30px; float:right; line-height: 80px; margin-right: 40px; cursor: pointer; display: none; } #check{ display: none; } @media (max-width: 1118px){ header .logo{ left: 8%; } } @media (max-width: 944px){ header .logo{ left: 6%; top: 20px; width: 1030px; } } @media (max-width: 860px){ label #btn{ display: block; } ul { position: fixed; width: 100%; height: 100vh; background: #66bfbf; text-align: center; transition: all .5s; } header ul li{ display: block; margin: 50px 0; line-height: 30px; } nav ul li a{ font-size: 20px; } label #check:checked ~ ul{ } }