-
Notifications
You must be signed in to change notification settings - Fork 5.3k
Open
Description
The header links or navigation bar links in the Natours project are not visible since the opacity is 0 however they can still be clicked without opening the header by clicking at the left side of the form. To fix this problem you should add the following pieces of code to the _navigation.scss:
&__link {
&:link,
&:visited {
display: inline-block;
//add this visibility visibility: hidden;
font-size: 3rem;
font-weight: 300;
padding: 1rem 2rem;
color: $color-white;
text-decoration: none;
text-transform: uppercase;
background-image: linear-gradient(120deg, transparent 0%, transparent 50%, $color-white 50%);
background-size: 230%;
transition: all 0.4s;
span {
margin-right: 1.5rem;
display: inline-block;
}
}
&__checkbox:checked ~ &__nav &__link {
visibility: visible;
}
Metadata
Metadata
Assignees
Labels
No labels