[Resolved] Sticky

Home Forums Support Sticky

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1024770
    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

    #1024771
    David
    Staff
    Customer Support

    Hi there,

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

    #1024773
    An Nguyen

    Hi David,

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

    #1024796
    David
    Staff
    Customer Support

    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.

    #1024836
    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

    #1025008
    David
    Staff
    Customer Support

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

    #1025762
    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.

    #1025961
    David
    Staff
    Customer Support

    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

    #1025979
    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.

    #1026535
    David
    Staff
    Customer Support

    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.

    #1026617
    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.

    #1027042
    Tom
    Lead Developer
    Lead Developer

    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.

    #1027052
    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.

    #1027265
    Tom
    Lead Developer
    Lead Developer

    I would personally go with the transform option.

    #1028735
    An Nguyen

    Thanks Tom!

    You alway give me a perfect solution! Thanks.

    Transform attribute is absolutely perfect.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.