<a href="https://www.youtube.com/channel/UCpOAe47k4uLjemSBTiAEk2g?sub_confirmation=1" target="_blank"><img id='img' align="right" src="https://yt3.googleusercontent.com/EJfnBM8DfmXQxTHpWNJeE8GHhRxFDmNLZ_b6iXZq6zpfy95h_FM2vTu8iK8uHTLBhdY9rF1jSg=s88-c-k-c0x00ffffff-no-rj" alt="Hackway"></a>

<buttonc align="right" id="menu-toggle-button">Show/Hide Menu</buttonc>

<div id="vertical-scroll-menu">

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

<center><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmHd2MewCfa-fOSe4ooZLScrr0BdlAt2Nqw19Tnt8qf-A7N0R5XdUEM_CkAIyqPVrvcAhvb71wIGWdUQf_w83WsnsyQpD_Bl09vGhM6OCJTRB3iCa-RH-0hIA8hoGP6AB2YBLqazMKEIGS7v9Nd61HQA4p2xqSOxUEiTr_ujTTOPDHG0kUWdIkDw/s320/Donate%20Us.png" /></center>

#vertical-scroll-menu {
height: 100%;
width: 150px;
position: fixed;
top: 0;
left: 0;
background-color: #333;
overflow-y: scroll;
}

#menu-toggle-button {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: #333;
border: none;
cursor: pointer;
align-self: flex-end;
}

#vertical-scroll-menu ul {
list-style-type: none;
padding: 0;
}

#vertical-scroll-menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

#vertical-scroll-menu li a:hover {
background-color: #111;
}
#img {
  border-radius: 50%;
}

window.onscroll = function() {
var menu = document.getElementById("vertical-scroll-menu");
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
menu.style.top = "20px";
} else {
menu.style.top = "0";
}
};

var toggleButton = document.getElementById("menu-toggle-button");
toggleButton.onclick = function() {
var menu = document.getElementById("vertical-scroll-menu");
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
};