[Resolved] Social icons next to background video (contained)

Home Forums Support Social icons next to background video (contained)

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1146800
    Piotr

    Hi guys,
    I try to create my new website. I added background video using this way: https://docs.generatepress.com/article/page-hero-background-video/

    My Header Element is set to “Contained”. Now I would like to create social icons positioned next to the background video. I created icons already using this solution: https://www.w3schools.com/howto/howto_css_sticky_social_bar.asp

    Unfortunately, I cannot move my icons next to video container. I’ve tried to do this with Hook, but it wasn’t working good. Is there any way to do the trick and make my icons fully responsive? I cannot find any solution on the forum which would work for me ๐Ÿ™
    Many thanks,
    Piotr

    PS Here’s what I want to do:
    Example

    #1147130
    David
    Staff
    Customer Support

    Hi there,

    edit this CSS and remove the overflow: hidden;

    .page-hero {
        position: relative;
        overflow: hidden; /* remove me */
    }

    Add this CSS:

    @media (min-width: 1024px) {
        .icon-bar {
            left: -40px;
        }
    }
    #1147303
    Piotr

    Hi David,
    the code works perfect. Thank you a lot! May I have one more question? Is there any way to add some vertically oriented text on the opposite side of the background video? I added text alredy, but unfortunatelly I couldn’t find any suitable solution to move the text to the right side and keeping my social icons on the left at the same time…
    Many thanks,
    Piotr
    PS Hereโ€™s what I want to do:
    Example 2

    #1147310
    David
    Staff
    Customer Support

    So try replacing:

    .icon-bar {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    with:

    .icon-bar, .tekstfotovideo {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    and replace:

    @media (min-width: 1024px) {
        .icon-bar {
            left: -40px;
        }
    }

    with:

    @media (min-width: 1024px) {
        .icon-bar {
            left: -40px;
        }
        .tekstfotovideo {
            right: -40px;
        }
    }
    #1147338
    Piotr

    Works like a charm! You helped me a lot. Thank you very much and have a nice day ๐Ÿ™‚
    Sincerely,
    Piotr

    #1147359
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.