Footer & Social Network Icons

[mintertweed]

Here is my website. Here is what I want my footer to look like. How do I place the social network icons over the border (still retaining the sticky footer) and limit the border on either side so that it doesn’t overlap the icons? Thank you in advance!

Edit: I now have the icons over the footer bar, but I have no clue on how to remove the bar from behind the icons. And I would like to not use an image.

[Paulie_D]

Perhaps a Codepen?

Looks pretty simple to me…either use multiple divs or perhaps pseudo elements rather than one colored div.

[mintertweed]

If I place a one-colored div behind the icons it wouldn’t match the gradient happening across the page. It’s a very slight gradient, but it’s there. Maybe I could create an SVG of that portion of the gradient and place it behind the icons. Hrm.

[mintertweed]

I set the z-index of .social to 1 and #footer-inside set to -1, but it seems to have no effect. Shouldn’t that place .social above #footer-inside? Here is my progress thus far. The only way to get the color in front of the footer bar is to place a color on the individual social widgets. Or at least, that’s all I’ve had success with at this point.

[Paulie_D]

My suggestion would be to use a singe centered div with no bg color to hold the social links.

Then use pseudo elements to create the lines on either side.

A bit like this: https://css-tricks.com/full-browser-width-bars/

or perhaps like this: https://css-tricks.com/line-on-sides-headers/

[Author]

Posts