florent/pages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add media query for collapsible menu and hamburger

Browse Source
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 {
float: right;
line-height: $nav-height;
.nav-trigger {
display: none;
}
.menu-icon {
display: none;
}
.page-link{
line-height: $line-height;
// Gaps between nav items, but not on the first one
@ -25,19 +34,59 @@
margin-left: 10px;
}
}
// @include media-query($on-palm) {
// position: fixed;
// top: 0px;
// right: 10px;
// text-align: right;
// &:hover .trigger {
// display: block;
// padding-bottom: 5px;
// }
// .page-link {
// display: line;
// }
// }
// added for hamburger
@include media-query($on-palm) {
position: absolute;
top: 9px;
right: $horizontal-spacing-unit / 2;
background-color: $background-color;
border: 1px solid $grey-color-light;
border-radius: 5px;
text-align: right;
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{