skip to Main Content

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>

3

Answers


  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;
    }
    
    Login or Signup to reply.
  2. //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>
    
    Login or Signup to reply.
  3. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search