overflow: hidden;
}
-.hover {
+.nav-items {
padding-bottom: .15em;
background: var(--navLinkColor), var(--navLinkColor);
background-size: .3em .1em;
transition: .3s linear, background-size .3s .2s linear;
}
-.hover:hover {
+.nav-items:hover {
background-size: 50% .1em;
background-position: 10% 100%, 90% 100%;
}
{{ "<!-- Partial block for navbar -->" | safeHTML }}
<nav>
{{ with .Site.GetPage "home" }}
- <div><img src="{{ .Params.homeIcon | absURL }}" alt=""><a class="hover" href="{{ .Permalink }}">{{ .Title }}</a></div>
+ <div><img src="{{ .Params.homeIcon | absURL }}" alt=""><a class="nav-items" href="{{ .Permalink }}">{{ .Title }}</a></div>
{{ end }}
<ul>
{{ range .Site.Sections }}
- <li><a class="hover" href="{{ .Permalink }}">{{ .Title }}</a></li>
+ <li><a class="nav-items" href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
<button data-visible="false"></button>