.navbar {
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
padding: 25px 15px;
background-color: #ffffff;
border-bottom: 1px solid #eaeaea;
}
.nav-logo img {
display: block;
height: 58px;
}
.nav-menu {
display: flex;
align-items: center;
list-style: none;
font-family: Georgia, serif;
}
.nav-menu li a {
padding: 8px 15px;
color: rgb(23, 48, 66);
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}
.nav-menu li a:hover {
color: rgb(35, 100, 119);
}
.nav-menu .separator {
color: #cccccc;
font-size: 2.5rem;
line-height: 1;
vertical-align: middle;
user-select: none;
}
.menu-toggle,
.burger-icon {
display: none;
}
@media screen and (max-width: 768px) {
.navbar {
flex-direction: column;
padding: 10px;
}
.menu-toggle {
display: block;
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.menu-toggle:focus-visible ~ .burger-icon {
outline: 2px solid rgb(35, 100, 119);
outline-offset: 4px;
}
.burger-icon {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
top: 22px;
right: 20px;
z-index: 1001;
width: 30px;
height: 21px;
cursor: pointer;
}
.burger-icon span {
display: block;
width: 100%;
height: 3px;
border-radius: 3px;
background-color: #333333;
transition: all 0.3s ease;
}
.nav-menu {
display: none;
flex-direction: column;
width: 100%;
margin-top: 15px;
border-radius: 4px;
background-color: #f2f2f2;
}
.nav-menu li {
width: 100%;
text-align: center;
}
.nav-menu li a {
display: block;
padding: 15px 0;
border-bottom: 1px solid #e0e0e0;
}
.nav-menu li:last-child a {
border-bottom: none;
}
.nav-menu .separator {
display: none;
}
.menu-toggle:checked ~ .nav-menu {
display: flex;
}
.menu-toggle:checked ~ .burger-icon span:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
.menu-toggle:checked ~ .burger-icon span:nth-child(2) {
opacity: 0;
}
.menu-toggle:checked ~ .burger-icon span:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
}