.site-header { position: relative; } .header-content-divider { margin: 0; display: none; } @media screen and (min-width: ($size__menu-collapse-width + 1 )) { .header-content-divider { display: block; } } .custom-header-media { overflow: hidden; width: 100%; bottom: 0; height: auto; position: absolute; left: 0; right: 0; top: 0; right: 0; img { height: 100%; left: 0; -o-object-fit: cover; object-fit: cover; top: 0; -ms-transform: none; -moz-transform: none; -webkit-transform: none; transform: none; width: 100%; } } .site-branding { @include rem('padding-top',40px); @include rem('padding-bottom',40px); line-height: $font__line-height-heading; position: relative; // causes logo to show over header image .site-logo { text-align: center; display: block; } .site-title { text-align: center; margin: 0; // @include rem('margin-bottom',10px); @include rem('font-size',$font__site-title-size); text-transform: uppercase; font-weight: normal; letter-spacing: normal; a { display: inline-block; text-decoration: none; } } .site-description { text-align: center; margin: 0; text-transform: lowercase; @include rem('font-size',$font__site-description-size); letter-spacing: 0.17em; } } #master .site-branding { .site-title a { &, &:hover { color: $color__text-heading; } } } @media screen and (max-width: 600px) { #master { .site-branding { .site-title { @include rem('font-size',($font__site-title-size - 15)); } .site-description { @include rem('font-size',($font__site-description-size - 2)); } } } } @media screen and (max-width: $size__menu-collapse-width) { #master .site-header-inner { background-image: none; } } @media screen and (min-width: ($size__menu-collapse-width + 1) ) { .site-header-inner { position: relative; } .site-title, .site-description, .site-logo { text-align: left; float: left; clear: both; position: relative; z-index: 100; } .main-navigation { position: absolute; top: 50%; right: 0; z-index: 99; // @include crossBrowser('transform',translateY(-50%)); @include rem('margin-top',-26px); text-align: right; border-bottom-width: 0; } }