CODEWITHSUNDEEP
htmlcssnav
Thomas
Thomas

Reputation: 37

I can't click on my navigation bar HTML & CSS

I'm building a website but I can't click on my website's navigation bar on the home page.

I've tried changing many things like increasing the z position and have googled the problem. Unfortunately nothing works.

 *{
	margin: 0;
	padding: 0;
    }

    .content {
      max-width: 500px;
      margin: auto;
    }

    nav {
	float: right;
	margin-top: 30px;
	z-index: 2;
    }

    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    nav li {
	display: inline-block;
    }

    nav a {
	color: white;
	text-decoration: none;
	padding: 5px 30px;
	font-family: "Times New Roman", Times, serif;
	font-size: 20px;
    }

    nav li.active a {
	border: 1px solid white;
    }

    nav li a:hover {
	border: 1px solid white;
    }

    body {
	font-family: monospace;
    }

    .hero {
	position: absolute;
	width: 100%;
	margin-left: 0px;
	margin-top: 0px;
    }

    h1 {
	color: white;
	font-size: 90px;
	text-align: center;
	margin-top: 20%;
    }
<header>

		<div class="container">
			<nav>
				<ul>
					<li class="active"><a href="index.html"> Home</a></li>
					<li><a href="services.html"> Services </a></li>
					<li><a href="contact.html"> Contact </a></li>
				</ul>
			</nav>
		</div>

		<div class="hero">
			<h1>Label</h1>
			<div class="button">
				<a href="services.html" class="button button-one"> Learn More</a>
			</div>
		</div>

		<div class="hero">
		<h2>Name</h2>
		</div>

	</header>

The 'Learn More' button that also links to the service page works fine but I still can't click on the navigation bar, even the services page. The hover effect doesn't work either.

Thanks in advance.

Upvotes: 0

Views: 2212

Answers (1)

hisbvdis
hisbvdis

Reputation: 1380

Two elements with .hero class have position:absolute; and overlap your <nav> element. You can check it by deleting these elements.

Upvotes: 4

Related Questions