Skip to content

Natours project issue with navigation Links #114

@Richard-Younes

Description

@Richard-Younes

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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions