[Inori]

I've been thinking about some CSS tweaks to the site's theme recently, and a big one I think any people would like is a sticky navbar, i.e. one that stays at the top of the page instead of staying static and scrolling with the rest of the content. It's fairly easy to implement, too: the "top" CSS class just needs to be modified from the first code block to the second.

Current CSS:

Code:

.top{ background-color: #1c1c1c; border-bottom: 2px solid #892222; }

Updated with sticky nav:

Code:

.top{ border-bottom: 2px solid #892222; background-color: #1c1c1c; position: fixed; width: 100%; z-index: 5; top: 0 }

[Pikami]

I like the static navbar, the scrolling one would just take up screen space.

[Inori]

I like the static navbar, the scrolling one would just take up screen space.

Maybe on mobile, but on desktop it's not that bad:

Spoiler: static nav

Spoiler: sticky nav

[mothered]

Some users prefer one and not the other and vice-versa.

I don't know If there's a plugin available, but It'll be good If there's an option In the UserCP to enable/disable your preference.

[Blink]

I've thought of this, and... Now that you've brought it up, I added it to my userstyle: https://userstyles.org/styles/141333/sinisterly

Go to "advanced options" and it'll let you select if you want it or not.

[Sikom]

I've been thinking about some CSS tweaks to the site's theme recently, and a big one I think any people would like is a sticky navbar, i.e. one that stays at the top of the page instead of staying static and scrolling with the rest of the content. It's fairly easy to implement, too: the "top" CSS class just needs to be modified from the first code block to the second.

Current CSS:

Code:

.top{    background-color: #1c1c1c;    border-bottom: 2px solid #892222; }

Updated with sticky nav:

Code:

.top{    border-bottom: 2px solid #892222;    background-color: #1c1c1c;    position: fixed;    width: 100%;    z-index: 5;    top: 0 }

There is a problem with your code, that is that it doesn't move the "main" part down. So the top get's cut off.

[Oni]

We considered adding this, funnily enough. I decided to go with a traditional navbar in the end. It's neat that you guys have made spinoffs to suit your personal preference.

[Synthx]

I was actually trying to replicate this myself, and couldnt get it to work at the time. Thank's for this!

[Inori]

There is a problem with your code, that is that it doesn't move the "main" part down. So the top get's cut off.

The code I posted is the general gist of it. To move the rest down you can set the "top" and "position" properties of the header and body content:

Code:

.header,body > .container{ position: relative; top: 45px }

---

We considered adding this, funnily enough. I decided to go with a traditional navbar in the end. It's neat that you guys have made spinoffs to suit your personal preference.

Theme options tho?

[Sikom]

It would be nice with an option to disable and or enable it, unsure what I would actually prefeer