File: D:/HostingSpaces/SBogers10/zipwire.komma.pro/resources/assets/sass/site/partials/_header.sass
/*==========================================================================
Navigation / Header
========================================================================== */
header
position: relative
z-index: 4
background-color: $yellow
.grid-row
padding: 0
+flex(center, center)
>.grid-col
+flex(space-between, center)
width: 100%
// Main logo
.logo
position: absolute
top: 0
left: -15px
background-color: $darkgrey
display: inline-block
width: 280px
padding: 15px 30px 30px
box-shadow: 0 0 20px rgba(0,0,0,0.4)
+respond-to-width(1100)
width: 230px
+respond-to-width(910)
width: 210px
img
width: 100%
/* Navigation
========================================================================== */
nav
+flex(flex-end, center)
position: relative
flex: 1 1 auto
margin-left: 280px
+respond-to-width(1100)
margin-left: 230px
+respond-to-width(910)
margin-left: 210px
ul
+flex(flex-end, center)
list-style: none
margin: 0
padding: 0
width: calc(100% - 3vw)
li
margin-right: 3.8%
white-space: nowrap
+respond-to-width(1250)
margin-right: 2.5vw
+respond-to-width(1050)
margin-right: 2.0vw
a
display: inline-block
padding: 42px 0
font-size: 0.8rem
line-height: 1.2
color: $dark
text-decoration: none
transition: opacity 0.3s
+respond-to-width(1075)
font-size: 0.75rem
+respond-to-width(1000)
font-size: 0.7rem
+respond-to-width(830)
font-size: 0.6rem
&:last-of-type
margin-right: 0
&:hover
a
opacity: 0.6
&.active
a
position: relative
font-weight: bold()
opacity: 1
&::after
position: absolute
left: 0
bottom: 38px
content: ""
display: block
width: 100%
height: 1px
background-color: $darkgrey
&.special-1
margin-right: 1.5%
a
padding: 10px
background-color: $darkgrey
color: $yellow
&.active a::after
bottom: -8px
&.special-2
a
padding: 10px
background-color: white
color: black
&.active a::after
bottom: -8px
.language-menu
width: 100px
+respond-to-width(750)
display: none