add svg menu icon

This commit is contained in:
Ray Elliott 2020-02-21 14:42:31 +00:00
parent d661cae78e
commit 6736625dc7
3 changed files with 15 additions and 1 deletions

View File

@ -1,6 +1,13 @@
.navigation { .navigation {
height: 6rem; height: 6rem;
width: 100%; width: 100%;
> .container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
a, a,
span { span {
display: inline; display: inline;
@ -85,6 +92,7 @@
display: none; display: none;
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
display: block; display: block;
display: flex;
font-size: 2.4rem; font-size: 2.4rem;
font-weight: 400; font-weight: 400;
line-height: 6rem; line-height: 6rem;
@ -94,6 +102,9 @@
&:focus { &:focus {
color: $link-color; color: $link-color;
} }
.svg-menu {
height: 1em;
}
} }
} }
} }

View File

@ -5,7 +5,7 @@
</a> </a>
{{ if or .Site.Menus.main .Site.IsMultiLingual }} {{ if or .Site.Menus.main .Site.IsMultiLingual }}
<input type="checkbox" id="menu-toggle" /> <input type="checkbox" id="menu-toggle" />
<label class="menu-button float-right" for="menu-toggle"><i class="fas fa-bars"></i></label> <label class="menu-button float-right" for="menu-toggle">{{ partial "svg/hamburger.svg" }}</label>
<ul class="navigation-list"> <ul class="navigation-list">
{{ with .Site.Menus.main}} {{ with .Site.Menus.main}}
{{ range sort . }} {{ range sort . }}

View File

@ -0,0 +1,3 @@
<svg class="svg-menu" viewBox="0 0 24 24">
<path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
</svg>

After

Width:  |  Height:  |  Size: 134 B