nav items have hover effects

This commit is contained in:
Thomas Smith 2023-02-28 10:21:45 -05:00
parent 918190596a
commit f9792ad216
2 changed files with 21 additions and 7 deletions

View file

@ -1,4 +1,4 @@
<nav class="navbar bg-dark navbar-expand-lg navbar-dark sticky-top my-auto main-nav"> <nav class="navbar navbar-expand-lg sticky-top my-auto main-nav">
<div class="container-fluid top-nav p-0"> <div class="container-fluid top-nav p-0">
<a class="navbar-brand p-0" href="/"><img src="/Images/tea-logo-1.png" class="top-logo" alt="top-logo"></a> <a class="navbar-brand p-0" href="/"><img src="/Images/tea-logo-1.png" class="top-logo" alt="top-logo"></a>
<button class="navbar-toggler me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" <button class="navbar-toggler me-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
@ -8,11 +8,11 @@
<div class="collapse navbar-collapse flex" id="navbarSupportedContent"> <div class="collapse navbar-collapse flex" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto my-auto"> <ul class="navbar-nav ms-auto my-auto">
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3"> <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3 top-nav-item">
<a class="nav-link{{ if $.IsMenuCurrent "main" . }} active" aria-current="page {{ end }}" href="{{ .URL }}">{{ .Name}}</a> <a class="nav-link{{ if $.IsMenuCurrent "main" . }} active" aria-current="page {{ end }}" href="{{ .URL }}">{{ .Name}}</a>
</li> </li>
{{ end }} {{ end }}
<li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3"> <li class="nav-item mt-lg-0 mt-md-0 mt-sm-3 mt-3 top-nav-item">
<a class="nav-link" aria-current="page" href="https://github.com/teaxyz/cli/stargazers">GitHub (<span class="stargazers"></span>)</a> <a class="nav-link" aria-current="page" href="https://github.com/teaxyz/cli/stargazers">GitHub (<span class="stargazers"></span>)</a>
</li> </li>
<style> <style>
@ -120,6 +120,14 @@
height:50px; height:50px;
} }
.top-nav-item{
color: #e1e1e1 !important;
}
.top-nav-item:hover{
color: #1a1a1a !important;
}
</style> </style>
</ul> </ul>

View file

@ -85,13 +85,19 @@ li{
} }
a{ a{
color: #fff !important; color: #fff;
text-decoration: none; text-decoration: none;
} }
a:hover{ a.nav-link{
color: #fff !important; color: #e1e1e1;
text-decoration: none !important; border-bottom: 1px solid #1a1a1a;
}
a.nav-link:hover{
color: #00ffd0;
border-bottom: 1px solid #00ffd0;
} }
/* Breakpoint-Specific Typography */ /* Breakpoint-Specific Typography */