Mobile header fixes to fit logo and nav items

This commit is contained in:
Jason Costello 2017-02-23 17:11:41 -08:00
parent fb6c603c73
commit 93209e11bf
1 changed files with 17 additions and 13 deletions

View File

@ -16,10 +16,10 @@
height: $header-height; height: $header-height;
padding: 0; padding: 0;
line-height: $header-height; line-height: $header-height;
background-position: 0 center;
font-size: 0; font-size: 0;
text-transform: uppercase; text-transform: uppercase;
background: image-url("logo-header.svg") center no-repeat; background: image-url("logo-header.svg") center no-repeat;
background-size: 100%;
&:hover{ &:hover{
opacity: .4; opacity: .4;
@ -44,23 +44,27 @@
} }
} }
@media (min-width: 769px) and (max-width: 805px) {
#header {
.main-links,
.external-links {
li > a {
font-size: 12px;
}
}
}
}
@media (max-width: 414px) { @media (max-width: 414px) {
#header { #header {
.navbar-brand { .navbar-brand {
.logo{ .logo{
width: $project-logo-width * .75; width: $project-logo-width * .75;
@include img-retina("logo-header.png", "logo-header@2x.png", $project-logo-width * .75, $project-logo-height * .75); height: $header-mobile-height;
}
}
}
} }
.by-hashicorp {
@media (max-width: 320px) { margin-top: 2px;
#header {
.navbar-brand {
.logo{
} }
} }
} }