Sticky top bar using block element

Hi there,

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

You can use the private information field.

Let me know :)

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

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

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

Thanks.

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.

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

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.

I would like just the top bar to be sticky.

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

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

Hi there,

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

Thanks. Great support as always.

You're welcome