update responsive navbar

This commit is contained in:
WinsDominoes 2024-05-08 15:20:35 +07:00
parent 4bb87b3dc6
commit cee20fb7e0
1 changed files with 15 additions and 12 deletions

View File

@ -89,25 +89,28 @@ header {
.nav > .nav-list {
display: flex;
margin: 0 1rem 0 auto;
gap: 2rem;
gap: 0.5rem;
padding-left: 0;
}
.nav > .nav-list > a {
text-decoration: none;
cursor: pointer;
width: 80px;
text-align: center;
border-radius: 7px;
padding: 0.5rem 0 0.5rem 0;
}
.nav > .nav-list > a:hover {
background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
}
.nav > .nav-list > a > li {
list-style-type: none;
}
.nav > .nav-list > a > li:hover {
background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
padding: 0.5rem 0.75rem 0.5rem 0.75rem;
border-radius: 7px;
}
.nav > #nav-check {
display: none;
}
@ -146,7 +149,7 @@ header {
position: fixed;
display: flex;
flex-direction: column;
gap: 0;
gap: 0.25rem;
width: 100%;
height: 0;
transition: all 0.3s ease-in;
@ -156,13 +159,13 @@ header {
background-color: light-dark(var(--light-nav-bg-color), var(--dark-nav-bg-color));
}
.nav > .nav-list > a > li {
.nav > .nav-list > a {
width: 100%;
text-align: start;
padding: 0.5rem 0.75rem 0.5rem 0.75rem;
margin-bottom: 0.35rem;
border-radius: 7px;
}
.nav > .nav-list > a > li:hover {
.nav > .nav-list > a:hover {
background-color: light-dark(rgba(0, 0, 0, 0.1),hsla(0,0%,100%,.05));
}