How to make the navbar sticky/fixed at the source theme

Themes
1

How is that possible at the source theme with the Code injection? I’ve already tried all sorts of tips here in the forum.

1 Like
2

Try something like this in the header injection

<style>
  #gh-navigation {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200;
  }
</style>
2 Likes
3

Thank you!!! Works perfect :slight_smile:

1 Like
4

Thank you. The code worked on my site great, only problem I have now is the fixed header is cutting off/overlapping on the top of my content on some pages. Do you know how to fix this?

1 Like
5

Ah yes. I have this problem too…

1 Like
6

yeah, the header looks great, but its overlapping with the top line of text which is unfortunate.

1 Like
7

@klafbang Can you Help perhaps? :pray:

8

Its not the best solution. But for now it works. I will update the code again in the next days.

#gh-navigation { position: sticky; width: 100%; z-index: 1000; height: 56px; top: -7px; }
1 Like
9

Hello, it would be better if it could be fixed while scrolling the screen down. Let it slide up so that it does not appear on the screen when scrolling up, and fix it when scrolling down. This would be more useful.

10

Thanks @eigro. This works great with a little adjustment (header was shifting a bit when scrolling). Changed the “top:” parameter from -7px to 0, and now seems to work perfectly on desktop.

11

Is there a way to keep the announcement bar stuck with the nav on scroll?