- This topic has 5 replies, 2 voices, and was last updated 3 years ago by
David.
-
AuthorPosts
-
January 28, 2020 at 5:10 am #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,
PiotrPS Here’s what I want to do:
January 28, 2020 at 7:27 am #1147130David
StaffCustomer SupportHi 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/January 28, 2020 at 9:31 am #1147303Piotr
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:
January 28, 2020 at 9:36 am #1147310David
StaffCustomer SupportSo 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/January 28, 2020 at 10:07 am #1147338Piotr
Works like a charm! You helped me a lot. Thank you very much and have a nice day 🙂
Sincerely,
PiotrJanuary 28, 2020 at 10:22 am #1147359David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.