I currently have a social link menu that is fixed to the left side of my page, structured like this:
<footer id="colophon"></footer>
<div>
<nav>
<ul id="social">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</nav>
</div>
Here is the corresponding CSS:
#social{
transform: rotate(-90deg);
position: fixed;
transform-origin: left;
left: 50px;
bottom: 22px;
}
However, I am facing an issue with the footer - I do not want the menu to overlap or block it. Instead, I want the menu to stop just above the footer. How can I achieve this without simply changing the bottom position? The menu should remain at 22px but not cover the footer.