CODEWITHSUNDEEP
javascripthtmlcss
user10273978
user10273978

Reputation: 1

Stop fixed div above footer

I have a social link menu fixed to the left side of he page like this

<footer id="colophon"></footer>
<div>
   <nav>
    <ul id="social">
        <li>Link1</li>
        <li>Link2</li>
        <li>Link3</li>
    </ul>
    </nav>
</div>

And the css

#social{
   transform: rotate(-90deg);
   position: fixed;
   transform-origin: left;
   left: 50px;
   bottom: 22px;
}

Now there is the footer and I don't want the menu on top of the footer, instead it should stop above the footer. How can I achieve this? I do not want to simply change the bottom position, instead it should be at 22px but stop above the footer.

Upvotes: 0

Views: 78

Answers (1)

ifkadeveloper
ifkadeveloper

Reputation: 51

You can add a margin-bottom to the social nav element equal to the height of the footer element to ensure it stops above the footer.

footer#colophon {
  height: 100px; /* or the height of the footer */
}

#social{
   transform: rotate(-90deg);
   position: fixed;
   transform-origin: left;
   left: 50px;
   bottom: 22px;
   margin-bottom: 100px; /* or the height of the footer */
}

Upvotes: 1

Related Questions