<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tari/pen/ZQpmEp?limit=all&page=58&q=service" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lato);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
font-size: 1rem;
line-height: 1.5;
height: 150vh;
background-color: #5acdc2;
}
a {
text-decoration: none;
color: #333;
}
.header {
width: 100%;
padding: 20px;
position: fixed;
top: 0;
left: 0;
counter-reset: no;
}
.header__inner {
height: 50px;
background-color: #fff;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.45);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.gnav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.gnav__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.gnav__link {
border-left: dashed #ccc 1px;
font-size: 0.78rem;
text-transform: uppercase;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-preferred-size: 110px;
flex-basis: 110px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.gnav__link:hover {
color: #cd5a65;
}
@media (max-width: 427px) {
.gnav__link:nth-child(1) {
display: none;
}
.gnav .dropdown__link:nth-child(1) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media (max-width: 537px) {
.gnav__link:nth-child(2) {
display: none;
}
.gnav .dropdown__link:nth-child(2) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media (max-width: 647px) {
.gnav__link:nth-child(3) {
display: none;
}
.gnav .dropdown__link:nth-child(3) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media (max-width: 757px) {
.gnav__link:nth-child(4) {
display: none;
}
.gnav .dropdown__link:nth-child(4) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media (max-width: 867px) {
.gnav__link:nth-child(5) {
display: none;
}
.gnav .dropdown__link:nth-child(5) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media (max-width: 977px) {
.gnav__link:nth-child(6) {
display: none;
}
.gnav .dropdown__link:nth-child(6) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media (max-width: 1087px) {
.gnav__link:nth-child(7) {
display: none;
}
.gnav .dropdown__link:nth-child(7) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.dropdown {
position: relative;
background-color: #cd5a65;
margin-left: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-preferred-size: 70px;
flex-basis: 70px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.dropdown:before {
content: '';
position: absolute;
top: 50%;
right: 10px;
width: 28px;
height: 25px;
background-image: -webkit-linear-gradient(bottom, transparent, 30%, #fff 30%, #fff 70%, transparent 70%);
background-image: linear-gradient(0deg, transparent, 30%, #fff 30%, #fff 70%, transparent 70%);
background-size: 100% 33.33%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.dropdown:after {
content: counter(no);
position: absolute;
left: 0;
top: 50%;
width: 40px;
height: 40px;
background-color: #cd5a65;
border-radius: 50%;
color: #fff;
border: 3px solid #fff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
-webkit-transform: scale(1) translate(-50%, -50%);
transform: scale(1) translate(-50%, -50%);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.dropdown:hover:after {
-webkit-transform: scale(1.05) translate(-50%, -50%);
transform: scale(1.05) translate(-50%, -50%);
background-color: #c74653;
}
.dropdown:hover .dropdown__inner {
visibility: visible;
}
.dropdown__inner {
position: absolute;
right: 0;
top: 50px;
width: 110px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.45);
background-color: #fff;
visibility: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.dropdown__link {
width: 100%;
height: 50px;
font-size: 0.78rem;
text-transform: uppercase;
border-top: dashed #cfcfcf 1px;
counter-increment: no;
display: none;
text-decoration: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.dropdown__link:hover {
color: #cd5a65;
}
.logo {
color: #cd5a65;
font-weight: bold;
padding-left: 1rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-preferred-size: 150px;
flex-basis: 150px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.info {
position: fixed;
bottom: 20px;
right: 20px;
padding: 2px 16px;
font-size: 0.78rem;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.45);
background-color: #fff;
}
.info a {
color: #cd5a65;
font-size: 0.9rem;
font-weight: bold;
margin-left: 6px;
}
</style></head><body>
<header class="header">
<div class="header__inner"><a class="logo" href="#">TITLELOGO</a>
<nav class="gnav">
<div class="gnav__inner"><a class="gnav__link" href="#">Home</a><a class="gnav__link" href="#">Service</a><a class="gnav__link" href="#">Portfolio</a><a class="gnav__link" href="#">Contact</a><a class="gnav__link" href="#">Support</a><a class="gnav__link" href="#">Link</a></div>
<div class="dropdown">
<div class="dropdown__inner"><a class="dropdown__link" href="#">Home</a><a class="dropdown__link" href="#">Service</a><a class="dropdown__link" href="#">Portfolio</a><a class="dropdown__link" href="#">Contact</a><a class="dropdown__link" href="#">Support</a><a class="dropdown__link" href="#">Link</a></div>
</div>
</nav>
</div>
</header>
<div class="info">Inspired by <a href="https://codepen.io/lukejacksonn/pen/PwmwWV" target="_blank">GreedyNav</a></div>
</body></html>
