Archived topic

Social icons next to background video (contained)

5 replies · Started by Piotr on January 28, 2020

Viewing posts 1–6 of 6

January 28, 2020 at 5:10 am #1146800

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

January 28, 2020 at 7:27 am #1147130

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;
    }
}

January 28, 2020 at 9:31 am #1147303

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

January 28, 2020 at 9:36 am #1147310

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;
    }
}

January 28, 2020 at 10:07 am #1147338

Works like a charm! You helped me a lot. Thank you very much and have a nice day :)
Sincerely,
Piotr

January 28, 2020 at 10:22 am #1147359

You're welcome

This archived topic is closed to new replies.

Start building better websites today.