[Resolved] Sticky top bar using block element

Home Forums Support [Resolved] Sticky top bar using block element

Home Forums Support Sticky top bar using block element

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1658218
    Tony

    I created a top bar using a block element and the hook generate_before_header. Is there a way to make it sticky when scrolling? I’m using the latest version of GP, GPP and GB. I do not have GB Pro.

    #1658257
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know 🙂

    #1658268
    Tony

    I’m running the site locally on my desktop, so that won’t be possible.

    #1658284
    Leo
    Staff
    Customer Support

    Unfortunately we cannot help with issues like this without seeing the site.

    Can we revisit once we have something live to look at?

    Thanks.

    #1658316
    Tony

    I’ll make the change to another site which I can push to staging. I’ll update again when it’s ready, and I’ll include the link in the private information section.

    #1658323
    Tony

    It is available now. I put the link in the private information section.

    #1658343
    Elvin
    Staff
    Customer Support

    Hi there,

    I’m not sure if I get the full idea of what you’re trying to do.

    To clarify: Do you only want the top bar to be sticky? Or must the navigation bar be sticky along with the top bar? Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1658381
    Tony

    I would like just the top bar to be sticky.

    #1658397
    Elvin
    Staff
    Customer Support

    I would like just the top bar to be sticky.

    I see, try this:

    Edit the Block element you’ve added and make sure it has a priority value of 1. This is so the Block element is placed outside of the header-wrap element.

    You then add sticky class to your Block Element’s main container.

    You then add this CSS:

    .sticky {
      position: -webkit-sticky; /* Safari */
      position: sticky;
      top: 0;
      z-index: 100;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1658905
    Tony

    I followed your directions and it still doesn’t work. You can check the link in the private information.

    #1659161
    David
    Staff
    Customer Support

    Hi there,

    i made small edit to Elvins CSS above – to include a z-index property so it doesn’t fall behind your content

    #1659229
    Tony

    Thanks. Great support as always.

    #1659232
    David
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.