sticky social media icon

[yjadlaoui]

Hey there , can someone tell me how to make the social media icons module in my blog page follows (sticky) when scrolling up and down please 

thank you 🙂  

[Oezcan]

As you can see, @webdew offers you a solution with an identical structure (i think they love my codes).

The child element, which in your case is the div with the class social-sharing, has the position sticky in the css. Best with values ​​like top: 20px; left: 20px etc.

the parent element in that case must have position relative and a height, let it eg. 1000px

[webdew]

Hi @yjadlaoui ,

Please try with the below code:

<!-- HTML -->

<div id="wrapper">

<div id="sticky">

sticky

</div>

</div>

<!-- CSS -->

#wrapper { /* Height given to testing only, remove otherwise */

height: 800px;

}

#sticky {

position: sticky;

position: -webkit-sticky;

background: #f83d23;

width: 100px;

height: 100px;

top: 70px;

display: flex;

justify-content: center;

align-items: center;

box-shadow: 0 0 6px #000;

color: #fff;

}

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regard.

[Oezcan]

I can´t login 🙂
I need a preview Link to your site 🙂

[Oezcan]

😄

Thats why:
<div style="vertical-align:middle;width: 50px; font-size: 1.5em;margin-top:150px;margin-left:150px;">

remove the style and try 

again with the example what i send you 🙂 (remember this is just an example)

<div class="yourClass">
    <div class="iconClass">
        your module
    </div>
</div>

.yourClass {
  position: relative;
  height: 2000px;
}

.iconClass {
  position: sticky;
  top: 50px;
}

do you have a link to your site? thats should be easier to solve the problem.

Best regards,

Özcan

[yjadlaoui]

So basically even after changing all of it and removing the </div> it still the same 😄 , so here's the link to my site if it can helps " https://25169193.hubspotpreview-eu1.com/_hcms/preview/content/45620831956?portalId=25169193&_preview... "

Thank you 🙂

[Oezcan]

Hello @yjadlaoui ,

maybe it's on that </div> that you need to remove:

Best regards,

Özcan

[yjadlaoui]

Hello @Oezcan 

when i remove the </div> the modules of social media and tags get mixed up like so : 

Thank you 

Yjadlaoui

[Oezcan]

Hello @yjadlaoui 

please send us the link to your website so that we can better assist you if necessary.

But as an example it can look like this:

Your HTML:

<div class="yourClass">
    <div class="iconClass">
        socialicon
    </div>
</div>

Your CSS:

.yourClass {
  position: relative;
  height: 2000px;
}

.iconClass {
  position: sticky;
  top: 50px;
}

Best regards,

Özcan

[yjadlaoui]

Hello @Oezcan 

Thank you for replying, So basically i added the lines that you sent me but nothing changed 😕 

This is the html part :

<div style="vertical-align:middle;width: 50px; font-size: 1.5em;margin-top:150px;margin-left:150px;">
<div class="social_sharing">
</div>
{% module 'social_sharing'
path='../modules/social-sharing',
styles={
'spacing': {
'spacing': {
'margin-right': 140,
'margin-left': 140,
'bottom': {
'value': 22,
'padding': 50,
'units': 'px',
}
}
}
}
}
%}
</div>
</div>

And this is my CSS code  : 

.blog-post__social {
left: -7rem;
position: relative ;
}

@media (max-width: 1200px) {
.blog-post__social {
left: 0;
margin-bottom: 1.5rem;
position: relative;
}
}

.blog-post__social .social-links {
align-items: stretch;
display: flex;
flex-direction: column;
}

@media (max-width: 1200px) {
.blog-post__social .social-links {
align-items: flex-start;
flex-direction: row;
}
}

.blog-post__social .social-links__icon:hover {
background-color: #45c3e6;
}

Best regards 

Yjadlaoui