added hamburger icon

This commit is contained in:
mrjvs 2018-12-27 13:42:38 +01:00
parent 5383b42581
commit efa1626818
2 changed files with 24 additions and 2 deletions

View File

@ -108,6 +108,21 @@ nav.navWrapper .navItem.hamburger {
position: absolute;
right: 0;
top: 0;
width: 60px;
height: 49px;
box-sizing: border-box;
flex-direction: column;
justify-content: space-evenly;
padding: .5em .8em;
}
nav.navWrapper .navItem.hamburger span {
height: 2px;
width: 100%;
background-color: white;
border-radius: 2px;
}
nav.navWrapper.open .navItem.hamburger {
background: rgba(0, 0, 0, 0.07);
}
@media screen and (max-width: 720px) {
nav.navWrapper {
@ -117,9 +132,12 @@ nav.navWrapper .navItem.hamburger {
nav.navWrapper .navItem:not(.brand) {
display: none;
}
nav.navWrapper.open .navItem, nav.navWrapper .navItem.hamburger {
nav.navWrapper.open .navItem {
display: block;
}
nav.navWrapper .navItem.hamburger {
display: flex;
}
nav.navWrapper.open .navItem.navBtn, nav.navWrapper.open .navItem.navBtnAlt {
padding: .5em 0;
width: 12em;

View File

@ -14,5 +14,9 @@
<a class="navItem navBtnAlt" href="/pnid/login">{{ locale.nav.links.login }}</a>
<a class="navItem navBtn" href="/pnid/register">{{ locale.nav.links.register }}</a>
{{/if}}
<a class="navItem hamburger" id="navToggle">ICON</a>
<a class="navItem hamburger" id="navToggle">
<span></span>
<span></span>
<span></span>
</a>
</nav>