Sticky navbar - Printable Version

Sticky navbar - Printable Version

+- Sinisterly (https://sinister.li)
+-- Forum: General (https://sinister.li/Forum-General)
+--- Forum: Announcements (https://sinister.li/Forum-Announcements)
+---- Forum: Suggestions (https://sinister.li/Forum-Suggestions)
+----- Forum: Old Suggestions (https://sinister.li/Forum-Old-Suggestions)
+----- Thread: Sticky navbar (/Thread-Sticky-navbar)

Pages: 1 2

Sticky navbar - Inori - 09-28-2017

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
}

RE: Sticky navbar - Pikami - 09-28-2017

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

RE: Sticky navbar - Inori - 09-28-2017

(09-28-2017, 03:56 AM)Pikami Wrote: 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

RE: Sticky navbar - mothered - 09-28-2017

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.

RE: Sticky navbar - Blink - 09-28-2017

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.

RE: Sticky navbar - Sikom - 09-28-2017

(09-28-2017, 03:04 AM)Inori Wrote: 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.

RE: Sticky navbar - Oni - 09-28-2017

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.

RE: Sticky navbar - Synthx - 09-28-2017

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

RE: Sticky navbar - Inori - 09-28-2017

(09-28-2017, 09:10 AM)Sikom Wrote: 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
}

(09-28-2017, 10:44 AM)Oni Wrote: 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?

RE: Sticky navbar - Sikom - 09-28-2017

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