This is my html code and I cant figure out how to get the button to be a link. Despite adding the anchor tag with a link inside, when I click on the button, nothing happens.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Week 8 Homepage</title>
<script src="homepage.js"></script>
</head>
<body>
<div class="top flex">
<span><a href="index.html" style="text-decoration: none"><h1 class="icon">Ron's Clothes</h1></a></span>
<span>
<div class="dropdown link1">
<a href="link1.html" style="text-decoration: none;">
<button class="btn btn-secondary btn-clr dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Shop
</button>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="link1.html">Tops</a></li>
<li><a class="dropdown-item" href="link1.html">Pants</a></li>
<li><a class="dropdown-item" href="link1.html">Outerwear</a></li>
</ul>
<a href="link1.html" style="text-decoration: none;"></a>
</div>
</span>
</div>
<img class="image" src="Screenshot (27).png" alt="clothes image">
<h1 class="featured">Featured Items</h1>
<div class="featuredimg">
<div class="column position1">
<a href="link1.html" style="text-decoration: none;">
<img src="shirt1.jpeg" alt="featured1" style="width: 75%">
<p>Early 90s Brine for Major Soccer<br>League Tee<br><strong>$38.58</strong></p>
</a>
</div>
<div class="column position2">
<img src="shirt2.jpeg" alt="featured2" style="width: 75%">
<p>90s Nike 'There Is No Finish Line'<br>Windbreaker<br><strong>$75.32</strong></p>
</div>
<div class="column position3">
<img src="shirt3.jpeg" alt="featured3" style="width: 75%">
<p>1992/1993 Manchester United F.C.<br>Training Tee<br><strong>$68.64</strong></p>
</div>
<div class="column position4">
<img src="shirt4.jpeg" alt="featured4" style="width: 75%">
<p>1995 Houston Rockets x Looney Tunes<br>'Daffy Duck' Tee<br><strong>$43.93</strong></p>
</div>
</div>
</body>
</html>I tried shifting the anchor tag around and it doesn’t work, sometimes the dropdown menu stops working too. I tried using javascript, giving the button and id and adding event listener but that doesn’t work either. I need some help on this as I’m out of ideas.
2
Answers
You should move your anchor tag from below to inside the button,here is the modified code:
You don’t need a
buttonand anaelement. Bootstrap allows you to style an anchor like a button.Remove the
data-bs-toggle="dropdown"attribute. The Bootstrap JS finds all elements with this attribute and wires them up to open the dropdown on click. If you left this attribute in, you would see the the dropdown open rather than the page change.Also, if you’re going to make the dropdown button into a link, then you don’t even need the dropdown at all.