CODEWITHSUNDEEP
htmlcss
tgs017
tgs017

Reputation: 31

Why can't I click on my navigation bar items on my website?

My cursor won't change to the hand cursor but instead a text cursor. And the transition animation does not play when I hover over each item in the navigation bar. I have only assigned one link to 'Home' of the navigation to see if it takes me to that link. I have used google.com as the link for 'Home' in the nav bar.

body {
   margin: 0;
   background: #222;
   font-family: 'Work Sans', sans-serif;
   font-weight: 400;
}

.container {
     width: 80%;
     margin: 0 auto;
}

header {
  background: #247DAA;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

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

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;

  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>Website</title>
</head>
<body>
<header>
  <div class="container">

    <h1 class="logo"></h1>

    <nav>
      <ul>
        <li><a href="https://www.google.com"></a>Home</li>
        <li><a href="#"></a>About</li>
        <li><a href="#"></a>News</li>
        <li><a href="#"></a>Gallery</li>
        <li><a href="#"></a>Contact</li>
      </ul>
    </nav>

  </div>
</header>

</body>
</html>

Upvotes: 3

Views: 1795

Answers (1)

Nihal
Nihal

Reputation: 5334

Your menu text is inside li tag so when you are trying to click on your menu you're clicking on li not on your <a> (anchor) tag.

Solution

Just put your text inside <a> (anchor) tag

For Example:- <a href="">Your text should be here</a>

body {
   margin: 0;
   background: #222;
   font-family: 'Work Sans', sans-serif;
   font-weight: 400;
}

.container {
     width: 80%;
     margin: 0 auto;
}

header {
  background: #247DAA;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  padding: 10px 0;
}

nav {
  float: right;
}

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

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;

  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>Website</title>
</head>
<body>
<header>
  <div class="container">

    <h1 class="logo"></h1>

    <nav>
      <ul>
        <li><a href="https://www.google.com">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

  </div>
</header>

</body>
</html>

other solution:

use css cursor:pointer of you want to achieve on element without <a> tag

Upvotes: 3

Related Questions