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
Add this to your
a
element styles://add a div in your code and javascript
You need the
a
to fill the entire space of theli
. This can be done with a combination ofposition: relative;
andposition: absolute;
like so: