Social icons next to background video (contained)

[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:

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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:

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Piotr]

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

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts