ndub80
10/26/2018 - 10:16 PM
Ndub Header
Navigation bar with ndub logo and mobile responsive. Built with sass.
<section id="header">
<div class="wrapper">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a href="/"><svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 500 175">
<defs>
<style>
.cls-1 {
fill: #c2d9ff;
stroke: #aaa;
stroke-miterlimit: 10
}
</style>
</defs>
<path id="b" d="M469.91 121.38a31.32 31.32 0 0 1-.69 6.34 32.07 32.07 0 0 1-2.16 6.63 31.3 31.3 0 0 1-3.78 6.31 25.74 25.74 0 0 1-5.62 5.33 27.63 27.63 0 0 1-7.61 3.7 31.64 31.64 0 0 1-9.76 1.39h-38.17a30.66 30.66 0 0 1-6.34-.7 32.64 32.64 0 0 1-6.63-2.15 30.9 30.9 0 0 1-6.31-3.79 25.47 25.47 0 0 1-5.33-5.61 27.74 27.74 0 0 1-3.7-7.65 32 32 0 0 1-1.39-9.8V25.92h21.16v95.46a8.17 8.17 0 0 0 2.42 6.22 8.5 8.5 0 0 0 6.1 2.32h38.17a8.16 8.16 0 0 0 6.22-2.36 8.58 8.58 0 0 0 2.24-6.18V92.73a8.13 8.13 0 0 0-2.36-6.22 8.47 8.47 0 0 0-6.1-2.24h-38.15V63.11h38.17a31.42 31.42 0 0 1 6.35.69 32.46 32.46 0 0 1 6.63 2.2 31 31 0 0 1 6.3 3.78 24.67 24.67 0 0 1 5.29 5.62 28.9 28.9 0 0 1 3.67 7.6 32 32 0 0 1 1.38 9.76z"
class="cls-1" />
<path id="u" d="M354.47 140.42a10.92 10.92 0 0 1-.82 4.23 10.34 10.34 0 0 1-2.24 3.38 10.58 10.58 0 0 1-3.33 2.23 10.3 10.3 0 0 1-4.11.82h-47.85a42.09 42.09 0 0 1-8.34-.9 39.54 39.54 0 0 1-8.75-2.89 45.85 45.85 0 0 1-8.34-5 32.5 32.5 0 0 1-7-7.41 37.8 37.8 0 0 1-4.84-10 41.89 41.89 0 0 1-1.85-12.94V63.11h21.16v48.83a18.59 18.59 0 0 0 1.42 7.44 17.36 17.36 0 0 0 3.87 5.66 16.79 16.79 0 0 0 5.73 3.62 19.78 19.78 0 0 0 7.12 1.26h37V63.11h21.16z"
class="cls-1" />
<path id="d" d="M239 121.38a32.36 32.36 0 0 1-1.38 9.8 28.86 28.86 0 0 1-3.66 7.65 24.86 24.86 0 0 1-5.29 5.61 30.9 30.9 0 0 1-6.31 3.79 32.78 32.78 0 0 1-6.67 2.15 31.28 31.28 0 0 1-6.39.7h-38.15a31.69 31.69 0 0 1-9.76-1.39 27.76 27.76 0 0 1-7.61-3.7 25.47 25.47 0 0 1-5.61-5.33 30.9 30.9 0 0 1-3.79-6.31 32.58 32.58 0 0 1-2.15-6.67 31.61 31.61 0 0 1-.7-6.3V92.73a29.37 29.37 0 0 1 3-13.79 28 28 0 0 1 17.05-14.28 34 34 0 0 1 9.6-1.55h38.17v21.16h-38c-2.82 0-5 .72-6.43 2.15s-2.2 3.54-2.2 6.31v28.48q0 4.32 2.16 6.51t6.3 2.2h38.17c2.87 0 5-.73 6.43-2.2s2.11-3.58 2.11-6.34V25.92H239z"
class="cls-1" />
<path id="n" fill="#1753b2" stroke="#aaa" stroke-miterlimit="10" stroke-width="2" d="M123.58 151.08h-21.16v-48.83a18.73 18.73 0 0 0-1.42-7.44 17.26 17.26 0 0 0-3.87-5.66 16.83 16.83 0 0 0-5.74-3.62 19.74 19.74 0 0 0-7.12-1.26h-37v66.81H26.09V73.61a10.25 10.25 0 0 1 3.09-7.45 10.82 10.82 0 0 1 3.42-2.23 10.56 10.56 0 0 1 4.15-.82h47.69a42.47 42.47 0 0 1 8.42.9 40 40 0 0 1 8.79 2.89 42.21 42.21 0 0 1 8.3 5 33.66 33.66 0 0 1 7 7.41 36.35 36.35 0 0 1 4.85 10.05 42.86 42.86 0 0 1 1.79 12.85z" />
</svg></a>
</div>
<div class="nav-wrapper">
<ul>
<li><a href="./">Home</a></li>
<li><a href="./about.html">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="profile">
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 500 175">
<defs>
<style>
.cls-1 {
fill: #c2d9ff;
stroke: #aaa;
stroke-miterlimit: 10
}
</style>
</defs>
<path id="b" d="M469.91 121.38a31.32 31.32 0 0 1-.69 6.34 32.07 32.07 0 0 1-2.16 6.63 31.3 31.3 0 0 1-3.78 6.31 25.74 25.74 0 0 1-5.62 5.33 27.63 27.63 0 0 1-7.61 3.7 31.64 31.64 0 0 1-9.76 1.39h-38.17a30.66 30.66 0 0 1-6.34-.7 32.64 32.64 0 0 1-6.63-2.15 30.9 30.9 0 0 1-6.31-3.79 25.47 25.47 0 0 1-5.33-5.61 27.74 27.74 0 0 1-3.7-7.65 32 32 0 0 1-1.39-9.8V25.92h21.16v95.46a8.17 8.17 0 0 0 2.42 6.22 8.5 8.5 0 0 0 6.1 2.32h38.17a8.16 8.16 0 0 0 6.22-2.36 8.58 8.58 0 0 0 2.24-6.18V92.73a8.13 8.13 0 0 0-2.36-6.22 8.47 8.47 0 0 0-6.1-2.24h-38.15V63.11h38.17a31.42 31.42 0 0 1 6.35.69 32.46 32.46 0 0 1 6.63 2.2 31 31 0 0 1 6.3 3.78 24.67 24.67 0 0 1 5.29 5.62 28.9 28.9 0 0 1 3.67 7.6 32 32 0 0 1 1.38 9.76z"
class="cls-1" />
<path id="u" d="M354.47 140.42a10.92 10.92 0 0 1-.82 4.23 10.34 10.34 0 0 1-2.24 3.38 10.58 10.58 0 0 1-3.33 2.23 10.3 10.3 0 0 1-4.11.82h-47.85a42.09 42.09 0 0 1-8.34-.9 39.54 39.54 0 0 1-8.75-2.89 45.85 45.85 0 0 1-8.34-5 32.5 32.5 0 0 1-7-7.41 37.8 37.8 0 0 1-4.84-10 41.89 41.89 0 0 1-1.85-12.94V63.11h21.16v48.83a18.59 18.59 0 0 0 1.42 7.44 17.36 17.36 0 0 0 3.87 5.66 16.79 16.79 0 0 0 5.73 3.62 19.78 19.78 0 0 0 7.12 1.26h37V63.11h21.16z"
class="cls-1" />
<path id="d" d="M239 121.38a32.36 32.36 0 0 1-1.38 9.8 28.86 28.86 0 0 1-3.66 7.65 24.86 24.86 0 0 1-5.29 5.61 30.9 30.9 0 0 1-6.31 3.79 32.78 32.78 0 0 1-6.67 2.15 31.28 31.28 0 0 1-6.39.7h-38.15a31.69 31.69 0 0 1-9.76-1.39 27.76 27.76 0 0 1-7.61-3.7 25.47 25.47 0 0 1-5.61-5.33 30.9 30.9 0 0 1-3.79-6.31 32.58 32.58 0 0 1-2.15-6.67 31.61 31.61 0 0 1-.7-6.3V92.73a29.37 29.37 0 0 1 3-13.79 28 28 0 0 1 17.05-14.28 34 34 0 0 1 9.6-1.55h38.17v21.16h-38c-2.82 0-5 .72-6.43 2.15s-2.2 3.54-2.2 6.31v28.48q0 4.32 2.16 6.51t6.3 2.2h38.17c2.87 0 5-.73 6.43-2.2s2.11-3.58 2.11-6.34V25.92H239z"
class="cls-1" />
<path id="n" fill="#1753b2" stroke="#aaa" stroke-miterlimit="10" stroke-width="2" d="M123.58 151.08h-21.16v-48.83a18.73 18.73 0 0 0-1.42-7.44 17.26 17.26 0 0 0-3.87-5.66 16.83 16.83 0 0 0-5.74-3.62 19.74 19.74 0 0 0-7.12-1.26h-37v66.81H26.09V73.61a10.25 10.25 0 0 1 3.09-7.45 10.82 10.82 0 0 1 3.42-2.23 10.56 10.56 0 0 1 4.15-.82h47.69a42.47 42.47 0 0 1 8.42.9 40 40 0 0 1 8.79 2.89 42.21 42.21 0 0 1 8.3 5 33.66 33.66 0 0 1 7 7.41 36.35 36.35 0 0 1 4.85 10.05 42.86 42.86 0 0 1 1.79 12.85z" />
</svg>
</div>
</nav>
</div>
</section>nav
position: relative
.profile
display: none
position: fixed
text-align: center
margin-top: 15vh
left: 50%
transform: translateX(-50%)
img
width: 150px
.logo
float: left
margin: 1.7rem 1rem 1rem
svg
height: 25px
ul
margin: 1rem 0
padding: 0
float: right
li
display: inline-block
float: left
&:not(:first-child)
margin-left: 2rem
&:last-child
margin-right: 1.4rem
a
display: inline-block
outline: none
color: $primary
font-weight: 900
padding: 1rem
margin: 0 .2rem
text-decoration: none
text-transform: uppercase
letter-spacing: .05rem
transition: color .5s ease
&:hover
color: $white
// Responsive Navigation Styles
@media screen and (max-width: 700px)
nav
.logo
margin: 1.2rem 0rem
.nav-wrapper
position: fixed
top: 0
left: 0
width: 100%
height: 100%
z-index: -1
background: $primary
opacity: 0
transition: all 0.2s ease
ul
position: absolute
top: 50%
transform: translateY(-50%)
width: 100%
li
display: block
float: none
width: 100%
text-align: right
margin-bottom: 10px
&:nth-child(1) a
transition-delay: 0.2s
&:nth-child(2) a
transition-delay: 0.3s
&:nth-child(3) a
transition-delay: 0.4s
&:not(:first-child)
margin-left: 0
a
padding: 10px 24px
opacity: 0
color: $secondary
font-size: 1.5rem
font-weight: 600
letter-spacing: 1.2px
transform: translateX(-20px)
transition: all 0.2s ease
&:hover
color: $primary
.nav-btn
position: absolute
right: 0px
top: 10px
display: block
width: 48px
height: 48px
cursor: pointer
z-index: 9999
border-radius: 50%
i
display: block
width: 20px
height: 2px
background: $primary
border-radius: 2px
margin-left: 14px
&:nth-child(1)
margin-top: 16px
&:nth-child(2)
margin-top: 4px
opacity: 1
&:nth-child(3)
margin-top: 4px
#nav:checked
+ .nav-btn
transform: rotate(45deg)
position: fixed
right: 10px
i
background: $primary-light
transition: transform 0.2s ease
&:nth-child(1)
transform: translateY(6px) rotate(180deg)
&:nth-child(2)
opacity: 0
&:nth-child(3)
transform: translateY(-6px) rotate(90deg)
~ .nav-wrapper
z-index: 999
opacity: 1
ul li a
opacity: 1
transform: translateX(0)
~ .profile
display: block
z-index: 1000
opacity: 1
color: $white
.hidden
display: none