<!--Make sure you VIEW in FUll PAGE or DEBUG mode. You can only see the off canvas nav on 768px or responsive - go ahead, shrink the page to see the magic. Enjoy!-->
<header class="site-header">
<div class="container">
<div class="logo"><span>Dominate</span></div>
<a href="#" class="button-block button-block--brand hide">start a project</a>
<div class="row">
<div class="text-center offset-sm-3 col-sm-6">
<ul id="menu-secondary-navigation" class="secondary-navigation hide">
<li class="menu-item1"><a href="#">About</a></li>
<li class="menu-item1"><a href="#">Work</a></li>
<li class="menu-item1"><a href="#">Contact</a></li>
</ul>
</div>
</div>
<input type="checkbox" class="check" id="checked">
<label class="menu-btn" for="checked">
<span class="bar top"></span>
<span class="bar middle"></span>
<span class="bar bottom"></span>
</label>
<label class="close-menu" for="checked"></label>
<div class="overlay">
<div class="menu-drawer">
<div class="inner-logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 238 58" style="enable-background:new 0 0 238 58;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E54B4B;}
</style>
<g id="XMLID_2_">
<path id="XMLID_3_" class="st0" d="M15.7,50H6V11h9.7c3.1,0,5.5,0.7,7.1,2.2c1.6,1.5,2.4,3.5,2.4,6.2v22.2c0,2.7-0.8,4.8-2.4,6.2
C21.2,49.3,18.8,50,15.7,50z M21,41.6V19.4c0-1.5-0.5-2.7-1.4-3.5c-0.9-0.8-2.2-1.3-4-1.3h-5.5v31.8h5.5C19.2,46.4,21,44.8,21,41.6
z"/>
<path id="XMLID_6_" class="st0" d="M55.8,18.5v24c0,2.7-0.9,4.8-2.5,6.2c-1.7,1.5-4.2,2.2-7.6,2.2c-3.4,0-5.9-0.7-7.6-2.2
c-1.7-1.5-2.6-3.5-2.6-6.2v-24c0-2.7,0.8-4.7,2.5-6.2c1.7-1.5,4.2-2.2,7.6-2.2c3.4,0,5.9,0.7,7.6,2.2
C54.9,13.8,55.8,15.8,55.8,18.5z M51.6,42.5v-24c0-3.2-2-4.8-6-4.8c-4,0-6,1.6-6,4.8v24c0,3.2,2,4.8,6,4.8
C49.6,47.3,51.6,45.7,51.6,42.5z"/>
<path id="XMLID_9_" class="st0" d="M71.1,50h-4.2V11h1.8l1.5,3.8c0.8-1.4,1.9-2.6,3.3-3.4c1.4-0.9,2.8-1.3,4.4-1.3
c4,0,6.6,1.5,7.7,4.4c1.9-2.9,4.4-4.4,7.6-4.4c5.6,0,8.5,2.8,8.5,8.4V50h-4.2V18.5c0-3.2-1.4-4.8-4.3-4.8c-1.7,0-3.2,0.7-4.6,2
c-1.4,1.4-2.1,2.7-2.1,4V50h-4.2V18.5c0-3.2-1.4-4.8-4.3-4.8c-1.7,0-3.2,0.7-4.6,1.9c-1.4,1.3-2.1,2.6-2.1,3.9V50z"/>
<path id="XMLID_11_" class="st0" d="M117.3,50h-4.2V11h4.2V50z"/>
<path id="XMLID_13_" class="st0" d="M133.5,50h-4.2V11h1.8l1.5,3.9c1.9-3.2,4.6-4.8,8-4.8c5.9,0,8.8,2.8,8.8,8.4V50h-4.2V18.5
c0-1.5-0.3-2.7-1-3.5s-1.9-1.3-3.6-1.3c-1.8,0-3.4,0.7-4.9,2c-1.5,1.4-2.2,2.7-2.2,4V50z"/>
<path id="XMLID_15_" class="st0" d="M179.4,50h-1.8l-1.6-3.8c-0.8,1.4-1.9,2.6-3.3,3.5c-1.4,0.9-2.9,1.3-4.5,1.3
c-5.8,0-8.6-2.8-8.6-8.4v-6c0-5.6,2.9-8.4,8.6-8.4h7v-9.8c0-1.4-0.5-2.6-1.4-3.4c-0.9-0.8-2.3-1.2-4.1-1.2c-3.6,0-5.3,1.5-5.3,4.6
v3.5h-4.2v-3.3c0-2.7,0.8-4.7,2.4-6.2c1.6-1.5,4-2.2,7.2-2.2c3.2,0,5.6,0.7,7.2,2.2c1.6,1.5,2.4,3.5,2.4,6.2V50z M175.2,31.7h-7
c-1.7,0-2.8,0.4-3.5,1.3c-0.6,0.8-1,2-1,3.5v6c0,1.5,0.3,2.7,1,3.5c0.6,0.8,1.8,1.3,3.5,1.3c1.7,0,3.2-0.6,4.7-2
c1.4-1.3,2.2-2.6,2.3-3.9V31.7z"/>
<path id="XMLID_18_" class="st0" d="M189.9,11h13.2v3.6h-9v28.7c0,1.1,0.3,2.1,0.9,2.8c0.6,0.8,1.4,1.1,2.5,1.1
c1.1,0,1.9-0.4,2.4-1.1c0.6-0.7,0.8-1.7,0.8-2.8v-7.1h4.2v6.9c0,2.5-0.7,4.5-2,5.8c-1.3,1.3-3.1,2-5.4,2s-4.1-0.7-5.5-2
c-1.4-1.3-2.1-3.3-2.1-5.8V11z"/>
<path id="XMLID_20_" class="st0" d="M228,42.5v-3.3h4.2v3.3c0,2.7-0.8,4.8-2.5,6.2c-1.6,1.5-4.1,2.2-7.4,2.2s-5.8-0.7-7.4-2.2
s-2.5-3.5-2.5-6.2v-24c0-2.7,0.8-4.7,2.5-6.2c1.6-1.5,4.1-2.2,7.4-2.2c3.3,0,5.8,0.7,7.4,2.2c1.7,1.5,2.5,3.5,2.5,6.2v13.2h-15.6
v10.8c0,3.2,1.9,4.8,5.7,4.8C226.1,47.3,228,45.7,228,42.5z M216.6,18.5v9.6H228v-9.6c0-3.2-1.9-4.8-5.7-4.8
C218.5,13.7,216.6,15.3,216.6,18.5z"/>
</g>
</svg>
</div>
<div class="razor">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 478.209 478.209" style="enable-background:new 0 0 478.209 478.209;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E54B4B;}
</style>
<g>
<path d="M426.455,414.604c-8.453-33.728-20.518-66.447-35.858-97.25c-18.829-37.806-42.753-73.247-71.109-105.338
c-48.428-54.809-92.961-80.877-94.833-81.96c-3.393-1.961-7.145-2.753-10.788-2.505L184.118,97.26
c5.943-28.556,4.84-58.414-3.254-86.506c-1.399-4.847-5.122-8.623-9.958-10.1c-3.796-1.159-7.815-0.769-11.318,1.096L158.95,2.09
c-7.233,3.849-9.989,12.871-6.143,20.115l11.249,21.139c5.109,9.6,6.175,20.612,3.001,31.007l-1.29,4.223l-1.078-1.098
c-2.183-2.222-5.1-3.461-8.214-3.489c-3.106-0.056-6.054,1.159-8.275,3.342c-4.584,4.504-4.65,11.899-0.147,16.485l9.964,10.146
L50.675,455.49c-0.645,2.113,0.544,4.349,2.658,4.994l57.478,17.551c0.382,0.117,0.775,0.174,1.168,0.174
c0.649,0,1.295-0.158,1.879-0.469c0.937-0.499,1.637-1.349,1.947-2.363l10.631-34.814c0.444-1.456,0.024-3.038-1.084-4.081
l-12.542-11.804l15.062,0.793c1.831,0.094,3.5-1.069,4.036-2.827l52.384-171.551c3.162-10.355,2.103-21.323-2.984-30.881
c-4.5-8.457-11.675-14.915-20.441-18.481l17.216-77.337l18.361,18.698c-0.984,5.426,0.393,11.162,4.019,15.552
c0.604,0.732,1.535,1.605,3.127,3.086c1.622,1.509,3.642,3.387,4.95,4.909c8.735,10.166,39.582,47.184,69.767,96.729
c36.972,60.686,59.263,116.96,66.253,167.26c2.526,18.175,17.048,32.729,35.316,35.393v0c2.025,0.295,4.049,0.44,6.062,0.44
c11.726,0,22.992-4.931,30.994-13.783C426.279,442.34,429.839,428.106,426.455,414.604z M171.119,39.586L159.872,18.45
c-1.778-3.349-0.505-7.52,2.836-9.298l0.638-0.34c1.618-0.861,3.473-1.042,5.224-0.507c2.239,0.684,3.961,2.428,4.607,4.665
c7.234,25.107,8.622,51.691,4.127,77.351l-5.155-5.249l2.56-8.385C178.507,64.249,177.232,51.072,171.119,39.586z M153.806,83.036
c0.697-0.685,1.622-1.051,2.598-1.049c0.977,0.009,1.893,0.397,2.578,1.095l46.32,47.165c-2.07,1.245-3.919,2.901-5.423,4.925
L153.76,88.21C152.347,86.771,152.368,84.449,153.806,83.036z M174.244,223.97c4.083,7.672,4.933,16.474,2.395,24.786
l-51.471,168.561l-22.839-1.202c-1.685-0.084-3.229,0.879-3.889,2.423c-0.66,1.543-0.285,3.334,0.937,4.484l18.68,17.581
l-8.736,28.612l-38.559-11.774l56.356-184.559c6.218-20.362,16.019-39.191,29.132-55.963c0.302-0.387,0.531-0.826,0.674-1.296
l1.855-6.075C165.384,212.48,170.796,217.49,174.244,223.97z M149.488,212.581c-13.49,17.401-23.589,36.898-30.022,57.966
L63.111,455.105l-3.616-1.104l104.902-343.542l7.004,7.132L149.488,212.581z M410.997,447.315
c-7.583,8.388-18.784,12.422-29.967,10.791c-14.769-2.154-26.508-13.906-28.547-28.579c-7.142-51.39-29.8-108.694-67.345-170.321
c-30.5-50.063-61.697-87.5-70.532-97.781c-1.6-1.862-3.801-3.909-5.569-5.554c-0.939-0.874-2.108-1.96-2.407-2.323
c-2.919-3.533-3.338-8.574-1.042-12.543c2.041-3.528,5.751-5.502,9.562-5.502c1.871,0,3.766,0.476,5.499,1.478
c1.826,1.056,45.269,26.488,92.844,80.332c27.894,31.568,51.426,66.427,69.943,103.608c15.083,30.286,26.947,62.46,35.26,95.628
C421.47,427.62,418.664,438.834,410.997,447.315z"/>
<path d="M387.709,412.974c-7.078-2.161-14.601,1.84-16.764,8.921c-2.162,7.081,1.84,14.601,8.921,16.764
c1.296,0.396,2.621,0.592,3.938,0.592c2.17,0,4.321-0.532,6.292-1.581c3.166-1.685,5.487-4.502,6.534-7.933
c1.047-3.43,0.696-7.063-0.989-10.229C393.957,416.342,391.14,414.022,387.709,412.974z M388.979,427.402
c-0.423,1.387-1.361,2.525-2.641,3.207c-1.28,0.682-2.749,0.824-4.135,0.399c-2.863-0.874-4.48-3.914-3.606-6.776
c0.713-2.336,2.87-3.844,5.194-3.844c0.523,0,1.056,0.077,1.582,0.237c1.387,0.423,2.525,1.361,3.207,2.641
C389.261,424.547,389.403,426.015,388.979,427.402z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>
<ul>
<li><a href="#" class="hide">welcome</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Hello</a></li>
<li><a href="#">info@dominate.com</a></li>
</ul>
</div><!--overlay-->
</div><!--menu-drawer-->
</div><!--con-->
</header>
* {
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
top: 0px;
left: 0px;
margin: 0 auto;
height: 100%;
font-smoothing: antialiased;
text-size-adjust: 100%;
text-rendering: optimizeLegibility;
overflow-x: hidden;
overflow-y: hidden;
}
.container {
width: 100%;
padding-right: 2rem;
padding-left: 2rem;
margin-right: auto;
margin-left: auto;
}
.site-header {
height: 60px;
position: relative;
z-index: 6;
}
.site-header {
padding-left: 2rem;
padding-right: 2rem;
}
.logo {
font-family: 'Unica One', cursive;
float: left;
font-size: 1.6rem;
margin: 0;
text-transform: ;
font-weight: 400;
padding-top: 0.7em;
color: #27262d;
z-index:999;
}
@media (max-width: 768px) {
.logo {
padding-top: 2rem;
}
}
.logo span {
letter-spacing:0.2em;
margin-left: -2rem;
}
.logo:before {
content:"";
position:absolute;
background-color: #E54B4B;
width:170px;
height:3px;
top:0;
left:0;
z-index:999;
transition: all 0.7s;
}
@media (max-width: 768px) {
.logo:before {
display:none !important;
}
}
.logo {
transition: all 0.7s;
}
/*..................*/
.site-header .button-block {
position: absolute;
right: 0;
top: 0;
z-index: 7;
transition: all .25s ease-out;
}
.button-block--brand {
background: #27262d;
color: #fff;
}
.button-block {
display: inline-block;
padding: 2em 1.3em 1.5em;
text-transform: uppercase;
font-family: 'Poppins', sans-serif;
font-size: 12px;
letter-spacing: .1em;
transition: cubic-bezier(.22,.61,.36,1);
text-decoration:none;
}
a.button-block.button-block--brand:hover {
color: #E54B4B;
background-color: rgb(39,38,45, 0.9);
}
.row {
display: flexbox;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.text-center {
text-align: center!important;
}
.offset-sm-3 {
margin-left: 30%;
}
.primary-navigation__aside-social, .secondary-navigation {
display: flexbox;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.secondary-navigation {
text-align: center;
flex-pack: center;
justify-content: center;
}
.secondary-navigation a {
display: inline-block;
padding: 2em 1.3em 0.2em;
text-transform: uppercase;
font-family: 'Poppins', sans-serif;
font-size: 13px;
letter-spacing: .1em;
color: #27262d;
transition: all .25s ease-out;
text-decoration: none;
font-weight:00;
}
.secondary-navigation .menu-item1 a:hover:after {
width: 2em;
}
.menu-item1 {
position: relative;
}
.secondary-navigation a:after {
transition: all 0.7s;
}
.secondary-navigation a:after {
position: absolute;
bottom: 0;
left: 1.4em;
margin: 1px 0;
width: 0%;
content: '.';
color: transparent;
background: #E54B4B;
height: 1px;
}
.secondary-navigation a:hover:after {
animation: fill 1s forwards;
animation: fill 1s forwards;
animation: fill 1s forwards;
opacity: 1;
}
@media (max-width: 768px) {
.hide {
display:none !important;
}
}
/*.....Toggle......*/
.check {
display: none;
}
/* menu button - label tag */
@media (max-width: 768px) {
.menu-btn {
position: fixed;
display: block;
top: 2rem;
right: 40px;
display: block;
width: 40px;
height: 40px;
font-size: 10px;
text-align: center;
cursor: pointer;
}
}
@media (min-width: 700px) {
.menu-btn {
display:none;
}
}
.bar {
position: absolute;
top: 0;
left: 0;
display: block;
width: 40px;
height: 1px;
background: #27262d;
transition: all .5s;
transition: all .5s;
transform-origin: left top;
transform-origin: left top;
transform-origin: left top;
}
.bar.middle {
top: 15px;
opacity: 1;
}
.bar.bottom {
top: 30px;
transform-origin: left bottom;
transform-origin: left bottom;
transform-origin: left bottom;
}
.close-menu {
position: fixed;
top: 0;
right: 400px;
width: 100%;
height: 100vh;
cursor: url(http://reech.ca/wp-content/uploads/2018/09/white-cross.svg),auto;
transition-property: all;
transition-property: all;
transition-duration: .3s;
transition-duration: .3s;
transition-delay: 0s;
transition-delay: 0s;
visibility: hidden;
opacity: 0;
}
@media (max-width: 768px) {
.close-menu {
right: 550px !important;
}
}
/* checked */
.check:checked ~ .menu-btn .menu-btn__text {
visibility: hidden;
opacity: 0;
}
.check:checked ~ .menu-btn .bar.top {
width: 56px;
transform: rotate(45deg);
transform: rotate(45deg);
transform: rotate(45deg);
}
.check:checked ~ .menu-btn .bar.middle {
opacity: 0;
}
.check:checked ~ .menu-btn .bar.bottom {
width: 56px;
top: 40px;
transform: rotate(-45deg);
transform: rotate(-45deg);
transform: rotate(-45deg);
}
.check:checked ~ .close-menu {
transition-duration: 1s;
transition-duration: 1s;
transition-delay: .3s;
transition-delay: .3s;
visibility: visible;
opacity: 1;
z-index: 7;
}
/*...menu Drawer....*/
.menu-drawer {
width: 400px;
background-color: #1c1c1c;
position: fixed;
right: -650px;
top: 0;
bottom:0;
transition: 0.5s;
transition-delay: time .6s;
transition: all 2s cubic-bezier(.19,1,.22,1) .2s;
transition: all 2s cubic-bezier(.19,1,.22,1) .2s;
}
.overlay {
width: 100%;
position: fixed;
right: -100%;
top: 0;
bottom:0;
transition: right linear .4s;
background-color: rgba(28,28,28, 0.6);
}
.open2 {
right: 0px;
transform: translateZ(0);
transform: translateZ(0);
transition: all 2s cubic-bezier(.19,1,.22,1) .5s;
transition: all 2s cubic-bezier(.19,1,.22,1) .5s;
}
@media (min-width: 1260px) {
.menu-drawer ul {
list-style: none;
position: relative;
line-height: 4rem;
padding-left: 6rem;
padding-top: 8rem;
}
}
@media (max-width:768px) {
.menu-drawer ul {
list-style: none;
position: relative;
line-height: 4rem;
padding: 6rem 6rem 6rem 8rem;
}
}
.menu-drawer a {
background-clip: text;
text-fill-color: transparent;
background-image: linear-gradient(to right, #E54B4B, #E54B4B 50%, #eee 50%);
background-size: 200% 100%;
background-position: 100%;
}
.menu-drawer li a {
display: inline-block;
font-family: 'Poppins', sans-serif;
font-size: 1.2rem;
color: #eee !important;
text-decoration:none;
}
.menu-drawer a:hover {
transition: all 0.5s cubic-bezier(0, 0, 0.23, 1);
background-position: 0%;
}
@media (max-width: 768px) {
.menu-drawer {
text-align: center !important;
width: 100%;
}
}
@media (max-width: 768px) {
.hide {
display:none;
}
}
@media (max-width: 768px) {
.menu-drawer li {
text-align: center !important;
font-size: 1.5rem !important;
padding-left: 2rem;
padding-right: 2rem;
}
}
.open {
right: 0px;
transform: translateZ(0);
transform: translateZ(0);
transition: all 4s cubic-bezier(.19,1,.22,1) .5s;
transition: all 4s cubic-bezier(.19,1,.22,1) .5s;
}
/*......Menu Drawer Images......*/
@media (max-width: 768px) {
.inner-logo {
padding-left: 8rem;
padding-right: 8rem;
padding-top: 6rem;
position: absolute;
}
}
@media (min-width: 1260px) {
.menu-drawer .inner-logo {
margin-top: 2rem;
margin-left: 5.5rem;
position: absolute;
}
}
.menu-drawer .inner-logo svg {
height: 150px;
width:300px;
}
@media (min-width: 700px) {
.menu-drawer .inner-logo svg {
height: 150px;
width:200px;
}
}
/*......................*/
@media (max-width: 768px) {
.razor {
padding-left: 8rem;
padding-right: 8rem;
padding-top: 6rem;
}
}
@media (min-width: 1260px) {
.menu-drawer .razor {
margin-top: 2rem;
margin-left: 7.5rem;
position: absolute;
}
}
@media (max-width: 768px) {
.menu-drawer .razor svg {
position: absolute;
height: 40vh;
width: 30vw;
fill: #E54B4B;
transform: rotate(140deg);
transform: rotate(140deg);
transform: rotate(140deg);
transform-origin: right;
transform-origin: right;
transform-origin: right;
right: 10rem;
margin: 64% 0;
}
}
@media (min-width: 1260px) {
.menu-drawer .razor {
position: absolute;
height: 12vh;
width: 20vw;
fill: #E54B4B;
transform: rotate(140deg);
transform: rotate(140deg);
transform: rotate(140deg);
transform-origin: right;
transform-origin: right;
transform-origin: right;
right: 11rem;
bottom: -4.5rem;
}
}$(function() {
$(".menu-btn").click(function() {
$(this).toggleClass("active");
$('.menu-drawer').toggleClass("open");
$('.overlay').toggleClass("open2");
});
});
$(function() {
$(".close-menu").click(function() {
$(this).toggleClass("active");
$('.menu-drawer').removeClass("open");
$('.overlay').removeClass("open2");
});
});
External CSS
This Pen doesn't use any external CSS resources.