-1

I built this navbar with two links. The links only go to the page when I click on the text. But when I click anywhere else on the circle, it doesn't go to another HTML page. What I want is that when you click on the text it will go to the link, but it will also go to the link whenever I click anywhere else. You can see for yourself by clicking on the text and then anywhere else on the circle but the text.

@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300&display=swap");

body {
  height: 100vh;
  background: rgb(221, 221, 221);
  font-family: "Barlow Semi Condensed", sans-serif;
  background-color: rgb(0, 0, 0);
  background-image: radial-gradient(at 16% 92%, rgb(8, 145, 178) 0, transparent 55%), radial-gradient(at 49% 99%, rgb(220, 38, 38) 0, transparent 21%), radial-gradient(at 31% 2%, rgb(219, 39, 119) 0, transparent 65%);

}

nav {
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100vw;
  justify-content: center;
}

ul {
  display: flex;
  justify-content: space-evenly;
}

li {
  list-style: none;
  width: 10em;
  height: 10em;
  border-radius: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.special2 {
  border: 5px solid white;
  margin: 10px;
  transition: 0.5s;
}

.special2:hover {
  transform: translateY(-10px);
}

.special {
  width: 15em;
  background: none;
  border: none;
  color: white;
  border-radius: 5px;
}

#organ {
  background-image: url(/images/cells.avif);
  background-size: cover;
}

#micro {
  background-image: url(/images/micro.jpg);
  background-size: cover;
  background-position: bottom;
}

label {
  font-size: 50px;
}

a {
  text-decoration: none;
  color: white;
}

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Barlow Semi Condensed", sans-serif;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>BioSite | Navigation</title>
  </head>
  <body>
    <nav>
      <ul>
        <li class="special"><label>BIOSITE</label></li>
        <li class="special2" id="organ"><a href="/pages/organ.html">ORGAN SYSTEMS</a></li>
        <li class="special2" id="micro"><a href="/pages/micro.html">MICROORGANISMS</a></li>
      </ul>
    </nav>
  </body>
</html>
Phenomenal Panther
  • 19
  • 3

3 Answers3

1

Add this to your a element styles:

a {
  text-decoration: none;
  color: white;
  /* Add this */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
Usaid
  • 406
  • 4
  • 6
1

//add a div in your code and javascript

 <nav>
      **<div class "circle">**
      <ul>
        <li class="special"><label>BIOSITE</label></li>
        <li class="special2" id="organ">
        <a href="/pages/organ.html">ORGANSYSTEMS</a></li>
        <li class="special2" id="micro">
        <a href="/pages/micro.html">MICROORGANISMS</a></li>
      </ul>
      </div>
    </nav>


  <script>
    const circleLink = document.querySelector('.circle');
    circleLink.addEventListener('click', function(event) {
    if (event.target.tagName === 'A') {
    return; // allow the link to be clicked as usual
    }
    const link = circleLink.querySelector('a');
    window.location.href = link.href;
    });
 </script>
Abhishek kashyap
  • 11
  • 2
1

You need the a to fill the entire space of the li. This can be done with a combination of position: relative; and position: absolute; like so:

.special2 {
  /* ... */

  position: relative;
}

.special2 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}



@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300&display=swap");
body {
  height: 100vh;
  background: rgb(221, 221, 221);
  font-family: "Barlow Semi Condensed", sans-serif;
  background-color: rgb(0, 0, 0);
  background-image: radial-gradient(at 16% 92%, rgb(8, 145, 178) 0, transparent 55%), radial-gradient(at 49% 99%, rgb(220, 38, 38) 0, transparent 21%), radial-gradient(at 31% 2%, rgb(219, 39, 119) 0, transparent 65%);
}

nav {
  display: flex;
  align-items: center;
  height: 100vh;
  width: 100vw;
  justify-content: center;
}

ul {
  display: flex;
  justify-content: space-evenly;
}

li {
  list-style: none;
  width: 10em;
  height: 10em;
  border-radius: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.special2 {
  border: 5px solid white;
  margin: 10px;
  transition: 0.5s;
  position: relative;
}

.special2 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.special2:hover {
  transform: translateY(-10px);
}

.special {
  width: 15em;
  background: none;
  border: none;
  color: white;
  border-radius: 5px;
}

#organ {
  background-image: url(/images/cells.avif);
  background-size: cover;
}

#micro {
  background-image: url(/images/micro.jpg);
  background-size: cover;
  background-position: bottom;
}

label {
  font-size: 50px;
}

a {
  text-decoration: none;
  color: white;
}

.custom-btn {
  width: 130px;
  height: 40px;
  color: #fff;
  border-radius: 5px;
  padding: 10px 25px;
  font-family: "Barlow Semi Condensed", sans-serif;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
  outline: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/style.css" />
  <title>BioSite | Navigation</title>
</head>

<body>
  <nav>
    <ul>
      <li class="special"><label>BIOSITE</label></li>
      <li class="special2" id="organ"><a href="/pages/organ.html">ORGAN SYSTEMS</a></li>
      <li class="special2" id="micro"><a href="/pages/micro.html">MICROORGANISMS</a></li>
    </ul>
  </nav>
</body>

</html>
Arleigh Hix
  • 9,990
  • 1
  • 14
  • 31