Почему моя панель навигации не позволяет мне нажимать на ссылку, пока она не достигнет определенного элемента? - PullRequest
Новая
       6

Почему моя панель навигации не позволяет мне нажимать на ссылку, пока она не достигнет определенного элемента?

0 голосов
/ 13 сентября 2018

Я создал базовый веб-сайт по параллаксу и собираюсь разместить простую панель навигации в правом верхнем углу экрана. Когда я загружаю сайт в своем браузере, ссылка (которая на данный момент связана с #) не позволит мне щелкнуть по ней, пока я не достигну класса .section. Если он касается любого из изображений, которые имеют эффект параллакса, он становится непрозрачным и не позволяет мне щелкать. У меня было чувство, что это как-то связано с плохим размещением, и даже когда я перемещал его, это, казалось, не имело никакого эффекта. Это также не будет плавать направо. Вот некоторые из HTML и CSS: 

body, html {
    height: 100%;
	margin:0;
	font-size: 16px;
	font-family: "Lato", sans-serif;
	font-weight: 400;
	line-height: 1.8em;
	color:#666;

}
.navbar {
	list-style: none;
	color:#779cd8;
	position:fixed;
	float: right;
	margin-right: 20px;

}
.pimg1, .pimg2, .pimg3{
	position:relative;
	opacity:0.70;
	background-position: center;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment: fixed;
}

.pimg1 {
	background-image: url('../AlignedResonance/mountainsvg.svg');
	min-height: 100%;


}

.pimg2 {
	background-image: url('../AlignedResonance/tree.jpg');
	min-height: 400px;
}
.pimg3 {
	background-image: url('../AlignedResonance/lake.jpg');
	min-height: 400px;
}

.section {
	text-align:center;
	padding: 50px 80px;
}

.section-light {
	background-color: #f4f4f4;
	color:#666;
}

.section-dark {
	background-color: #282e34;
	color:#ddd;
}

.ptext {
	position:absolute;
	top:50%;
	width: 100%;
	text-align: center;
	color:black;
	font-size: 27px;
	letter-spacing: 8px;
	text-transform:uppercase;
}

.ptext .border {
	background-color: #111;
	color: #fff;
	padding:20px;
}
<!DOCTYPE html>
<html>
    <head>
	    <title>Aligned Resonance</title>
	    <link rel="stylesheet" type="text/css" href="../AlignedResonance/style.css">
    </head>
    <body>
	    <ul class="navbar">
		    <li><a href="#">Home</a></li>
	    </ul>
	    <div class="pimg1">
		    <!-- class ptext -->
		    <div class="ptext">
			    <span>
				    Aligned Resonance
			    </span>
		    </div>
	    </div>
	    <section class="section section-light">
		    <h2>Section One</h2>
		    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	    </section>
	    <div class="pimg2">
		    <div class="ptext">
			    <span class="border">
				    Text 2
			    </span>
		    </div>
	    </div>
	    <section class="section section-dark">
		    <h2>Section One</h2>
		    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	    </section>
	    <div class="pimg3">
		    <div class="ptext">
			    <span class="border">
				    Text 3
			    </span>
		    </div>
	    </div>

	    <section class="section section-dark">
		    <h2>Section One</h2>
		    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	    </section>
	    <div class="pimg1">
		    <div class="ptext">
			    <span>
				    Aligned Resonance
			    </span>
		    </div>
	    </div> 
    </body>
</html>

Извините, если у меня нет правильного формата и т. Д., Так как я новичок в HTML и на этом сайте.

1 Ответ

0 голосов
/ 13 сентября 2018

Попробуйте обновить z-index для вашего класса navbar: 

.navbar {
    list-style: none;
    color:#779cd8;
    position:fixed;
    float: right;
    margin-right: 20px;
    z-index: 1;
}
...