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

Home Forums Support Is there a way to overlay "Lightweight Social Icons" OVER an image?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #124502
    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

    #124598
    Tom
    Lead Developer
    Lead Developer

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

    #125136
    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

    #125189
    Tom
    Lead Developer
    Lead Developer

    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.

    #125341
    George

    That’s it Tom! Worked like a charm!

    #125364
    Tom
    Lead Developer
    Lead Developer

    Awesome 🙂 Glad I could help.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.