CSS Fixed Footer Link Bar

ladyjellington profile image Jasmine Gump ・1 min read

I've been slowly building up front end CSS elements for my personal website. This one is a fixed link bar that will scroll along with you as you scroll through the webpage.


markdown guide

Just 2 suggestion if you don't mind.
Add some transition on you li to scale smoothly. Something like:
li {transition: all 0.3s ease;}

And the other suggestion is: try to use semantic name in colors name classes. Is better to called $pink rather than $color-22



Hi Arol,

Thanks for the suggestion! I absolutely agree about the transition, so I've implemented it :)
As for the names, I agree that it's better to name the color name as classes. The only reason I labeled them by numbers for now is because I'm still experimenting with the color palettes.

Thanks so much for taking your time to give feedback!


That's perfect.
I just have an idea, I think it'll be better if the non-hovered boxes get smaller and it's opacity decreases.
I mean that, as an example, when the user puts the mouse on twitter icon, twitter icon's width and hight increase as you did and also other icon's width and height decrease and they get lower opacity than the twitter icon. As in the below image.
I think this will help users focus on that small task.


What a wonderful suggestion! I just implemented it in the Codepen because I agree, it does help the user focus on the task. Thank you!


I like your choice of having position: absolute on small devices. Makes perfect sense for the visitor to share after they have done reading - saves precious screen space on mobile.