silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add media query for collapsible menu and hamburger

This commit is contained in:
monkeywithacupcake 2018-01-06 08:56:22 +09:00 committed by GitHub
parent 3a0a0affa5
commit c7553ec06f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 62 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
_sass/_header.scss
View File

@ -18,6 +18,15 @@
.site-nav { .site-nav {
float: right; float: right;
line-height: $nav-height; line-height: $nav-height;
.nav-trigger {
display: none;
}
.menu-icon {
display: none;
}
.page-link{ .page-link{
line-height: $line-height; line-height: $line-height;
// Gaps between nav items, but not on the first one // Gaps between nav items, but not on the first one
@ -25,19 +34,59 @@
margin-left: 10px; margin-left: 10px;
} }
} }
// @include media-query($on-palm) { // added for hamburger
// position: fixed; @include media-query($on-palm) {
// top: 0px; position: absolute;
// right: 10px; top: 9px;
// text-align: right; right: $horizontal-spacing-unit / 2;
// &:hover .trigger { background-color: $background-color;
// display: block; border: 1px solid $grey-color-light;
// padding-bottom: 5px; border-radius: 5px;
// } text-align: right;
// .page-link {
// display: line; label[for="nav-trigger"] {
// } display: block;
// } float: right;
width: 36px;
height: 36px;
z-index: 2;
cursor: pointer;
}
.menu-icon {
display: block;
float: right;
width: 36px;
height: 26px;
line-height: 0;
padding-top: 10px;
text-align: center;
> svg path {
fill: $grey-color-dark;
}
}
input ~ .trigger {
clear: both;
display: none;
}
input:checked ~ .trigger {
display: block;
padding-bottom: 5px;
}
.page-link {
display: block;
padding: 5px 10px;
&:not(:last-child) {
margin-right: 0;
}
margin-left: 10px;
}
}
} }
.header-bar{ .header-bar{