[Resolved] Is there a way to overlay "Lightweight Social Icons" OVER an image?

[George]

Hello Tom,

Out of curiosity, is there a way to overlay “Lightweight Social Icons” over an image?

Let’s say I had a banner going across the entire width of the screen — and I wanted to place the social icons within the banner — is that possible?

Thanks,

George

[Tom]

You can do this using absolutely positioning. Are you trying to do this in the header or inside another element?

[George]

Hello Tom,

Basically I was considering instead of using a small header image (250px * 120px) which floated left — considered using a full length image logo (1100px * 200px) — and trying to nest the lightweight social icons in the midst of the image of the large logo.

I tried absolute positioning the logo, as well as the social light icons, however the social icons always nest above the image.

I’m just seeing if it can be done, since I’ll be finishing my upgrade across all my sites with logo changes. I’m just trying to figure out the size of the logos I should go with.

Thanks,

George

[Tom]

You should be able to do it like this:

.inside-header {
position: relative;
}

.header-widget {
      position: absolute;
      top: 10px;
      right: 10px;
}

You can adjust the top and right positions to place it where you like.

[George]

That’s it Tom! Worked like a charm!

[Tom]

Awesome 🙂 Glad I could help.

[Author]

Posts