[Resolved] Sticky

[An Nguyen]

Hi there,

I tried to use this code to make topbar and main nav sticky but it doesn’t work. I need your support. I turned off sticky option on customize

https://generatepress.com/forums/topic/sticky-top-bar-and-main-navigation/

Thanks

[David]

Hi there,

it won’t work on your site as you’re using the merged header Element.

[An Nguyen]

Hi David,

I turned it off , it’s still the same situation.

[David]

Thats because you have this CSS that is setting its position to relative:

.home .site-header {
background-color: transparent;
position: relative;
}

You also need to set the top value for the site header to the height of the top bar which is 57px.

[An Nguyen]

Hi David,

It worked. May I ask you about issue relating to sticky? In single post, I tried to make tableofcontent sticky. I did a hook after-entry-header and put shortcode inside div-wrapper (“wrap-lwptoc”). I want it displays as a sticky object at outside container(like right sidebar) but I couldn’t. It’s sticky but not move to the left -80px. This is my css following a guide that you posted about GP-social sticky.

`.wrap-lwptoc{
display: block !important;
position: sticky !important;
position: -webkit-sticky !important;
top: 103px;
height: 0;

}
.lwptoc {
top: 57px;
flex-direction: column;
left: -80px !important;
}`

Thanks

[David]

Sticky elements are relative to their parent container and the scroll direction which is vertical – so the Left property doesn’t apply.

If you want to move the element horizontally you will need to transform its position:

transform: translateX(-80px);

[An Nguyen]

Hi David,

Thanks David, you did the trick but I have a bit confusion about using left. You can use left to move GP-social up to left side but this case is different. However, this case is similarity with GP-social. https://generatepress.com/forums/topic/social-share-buttons-only-in-post-and-fixed-in-sidebar/

As you said, relative position we use transform instead of left because of scroll direction, can I move the element both vertical and horizontal such as going left 80px and then going up 50px? I tried with translateY but it doesn’t work.

[David]

That uses margin-left which may also work but not seeing the actual element you wanted to move transform was a safer bet.

This explains the transform property:
https://www.w3schools.com/cssref/css3_pr_transform.asp

[An Nguyen]

Hi David,

I used this code from page 3 of this link

@media (min-width: 840px) {
    .floating-container {
        display: block;
        position: sticky !important;
        position: -webkit-sticky !important;
        top: 80px;
        height: 0;
    }

    #gp-social-share {
        top: 1em;
        flex-direction: column;
        left: -50px !important;

    }
}

+You used “left:-50px !important”. Therefore, I used for tableofcontent but it doesn’t work. After your suggestion, I used transform: translateX(…); and it works that why this makes me confusion.

[David]

As this topic has gone from sticky nav/top bar, to TOC to social links i provided the transform translate method as this works in the majority of scenarios.

CSS is relative to the HTML it is applied, just because something works in one scenario doesn’t meant it can be applied everywhere.

I suggest you study some W3Schools so you’re better equipped.

[An Nguyen]

Hi David,

CSS is relative to the HTML I knew that David. This is a basic level.

This topic has given a sticky on right-side bar site (after-entry-header) that you supported “JUAN JOSE GONZALEZ” as page 3. Have you read that? It is the same situation because I also put my tableofcontent on the same location. When you using hook, it has been injected the php function in HTLM template. So, I think HTML in the after-entry-header location is the same structure.

I confused because I used “left” and this attribute does not work. However, in my case, I’ve used margin-left and transform: translateX(…) and both give me the correct solution. I solved the tableofcontent problem by myself.

Anyway, thanks for your support for sticky main nav and top-bar.

[Tom]

Did using transform not work for you?

Sometimes using left will work, but it depends on a lot of factors. If it doesn’t work in this scenario, you’ll want to use transform instead.

[An Nguyen]

Hi Tom,

“Transform” and “margin-left” work correctly. In contrast, when I used “left”, the tableofcontent doesn’t change its position. Finally, I tried “transform” & “margin-left” , however I have a little bit confuse on this and I’ve wondered which one is the correct option changing the position of this element.

[Tom]

I would personally go with the transform option.

[An Nguyen]

Thanks Tom!

You alway give me a perfect solution! Thanks.

Transform attribute is absolutely perfect.

[Author]

Posts