advanced-css-course icon indicating copy to clipboard operation
advanced-css-course copied to clipboard

Natours project issue with navigation Links

Open Richard-Younes opened this issue 2 years ago • 1 comments

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;
}

Richard-Younes avatar Sep 17 '23 08:09 Richard-Younes

@Richard-Younes If it would be possible then can you assign me to this issue I want to resolve this would be my first contribution

pragyamishra56 avatar Oct 06 '23 01:10 pragyamishra56