header {
// Horizontal scrolling shadow: https://codepen.io/mrowa44/pen/xRpMYm background: linear-gradient(to right, $color-white 10%, rgba($color-white, 0)), linear-gradient(to right, rgba($color-white, 0), $color-white 90%) 0 100%, linear-gradient(to right, $color-grey, rgba($color-white, 0) 10%), linear-gradient(to left, $color-grey, rgba($color-white, 0) 10%); background-attachment: local, local, scroll, scroll; border-bottom: 1px solid $color-grey-70; overflow: auto; padding: 15px 0; position: fixed; top: 0; width: 100%; .blog-icon { border-bottom: 0; margin: 0 20px; @media(min-width: 768px) { margin: 0 20px 0 0; } img { vertical-align: bottom; min-width: 20px; width: 20px; } } nav { align-items: center; display: flex; ul { display: flex; list-style-type: none; margin: 0; padding: 0; li { border-color: transparent; color: $color-grey-30; font-size: 14px; display: inline-block; margin: 0 20px; a { border-bottom: 0; &:hover { border-bottom: 1px solid $color-grey-30; } } } } } @media(min-width: 768px) { border-bottom: 0; padding: 50px; position: initial; width: auto; }
}