CMS Development

yjadlaoui
Contributeur

sticky social media icon

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 🙂  

0 Votes
9 Réponses
Oezcan
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

sticky social media icon

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

Oezcan Eser Signature
webdew
Guide | Partenaire solutions Diamond
Guide | Partenaire solutions Diamond

sticky social media icon

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.

0 Votes
Oezcan
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

sticky social media icon

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

Oezcan Eser Signature
Oezcan
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

sticky social media icon

😄

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

Oezcan Eser Signature
yjadlaoui
Contributeur

sticky social media icon

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 🙂

0 Votes
Oezcan
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

sticky social media icon

Hello @yjadlaoui ,

 

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

Oezcan_0-1643109783830.png

 

Best regards,

Özcan

Oezcan Eser Signature
yjadlaoui
Contributeur

sticky social media icon

Hello @Oezcan 

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

Capture d’écran 2022-01-25 à 12.30.19.png

Thank you 

Yjadlaoui

0 Votes
Oezcan
Contributeur de premier rang | Partenaire solutions Diamond
Contributeur de premier rang | Partenaire solutions Diamond

sticky social media icon

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

Oezcan Eser Signature
yjadlaoui
Contributeur

sticky social media icon

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

0 Votes