[Resolved] Floating Icon Top Right Hand Corner, Above Content

Home Forums Support [Resolved] Floating Icon Top Right Hand Corner, Above Content

Home Forums Support Floating Icon Top Right Hand Corner, Above Content

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #277383
    Rylan Urban

    One of my solar energy clients got a png icon from their provincial energy provider to put on their website.

    The icon needs to be in the top right hand corner of the site and float down when the users scrolls.

    Here is an example of what I mean:

    Floating Icon Example

    I actually can’t even think of a way to do this.

    I need it on http://rootsrocksolar.ca

    #277411
    Tom
    Lead Developer
    Lead Developer

    You would need to put it in the Before Header hook, then give it a class and some CSS:

    .my-floating-image {
        position: fixed;
        top: 20px;
        right: 20px;
    }
    #277434
    Rylan Urban

    Something isn’t quite right!

    I’d tried it here: http://solarpanelpower.ca/

    For some reason not right had side, nor floating on content.

    #277437
    Leo
    Staff
    Customer Support

    Did you add the image? I don’t see it on that page.

    #277438
    Rylan Urban
    #277439
    Leo
    Staff
    Customer Support

    This is what I see: https://s28.postimg.org/dizua04yl/solar.jpg

    Am I missing the image somewhere?

    #277440
    Rylan Urban

    Oh what the heck. Probably my cache. Just out the door.. let me ping you in few hours

    #277463
    Rylan Urban

    Sorry for the confusion, can you check again please?

    #277511
    Leo
    Staff
    Customer Support

    k now I see two of those images.

    You don’t need the dot before saskpowericon class in your image HTML.

    #277519
    Rylan Urban

    Shoot obvious mistake! Ammended, but problem persists – no change

    #277526
    Leo
    Staff
    Customer Support

    Looks like it’s working to me. You might need to clear cache.

    #277530
    Rylan Urban

    Oh my gosh… this W3 plugin is driving me crazy. Thanks for the help!

    #277531
    Leo
    Staff
    Customer Support

    You’re welcome 🙂

    Might be easier to turn off the plugin when you are developing the site!

    #277559
    Rylan Urban

    One more thing, what CSS can I use to drastically decrease the size on mobile! Not looking good there lol – too big!

    Rylan

    #277561
    Leo
    Staff
    Customer Support

    Try something like this:

    @media (max-width: 768px) {
        .saskpowericon {
            max-width: 100px;
        }
    }
Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.