<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#about">About</a>
<a href="#" class="icon" onclick={(event) => myFunction()}>☰</a>
</div>
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
const topnav = document.getElementById("myTopnav");
if (topnav.classList.contains("responsive")) {
topnav.classList.remove("responsive"); // Collapse menu
} else {
topnav.classList.add("responsive"); // Expand menu
}
console.log(topnav.className);
}
/* not using this now as didn't add class*/
function OriginalMyFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {