Making Navigation&Head sticky

tars108

On JA Social II, the Navbar disappeares when scrolling down. On FF it reappears when scrolling back up, on various Chrome browsers it stays hidden when scrolling back up.
I want to set it to be always visible (position:sticky), along with the headline/logo but I can not find the screws and bolts to make that happen. Any help on how to solve that would be much appreciated 🙂

saguaros

Hi tars108

You can use this custom css:

.scrollDown .t3-header {
  top: 0 !important; }

put into the file: /templates/ja_social_ii/css/custom.css (Create this file if it doesn't exist)

tars108

saguaros

Super, that solves the problem with the header, strike one 🙂

The problem of the disappearing Nav-Bar still remains, how can I solve that?

saguaros

tars108

You mean that you want the navbar is sticky as well, right?

You can use this custom css:

.scrollDown .t3-mainnav {
  position: fixed;
  top: 129px;
  left: 0;
  right: 0;
  z-index: 999;
}
.scrollUp .t3-mainnav {
  position: fixed;
  margin-top: 129px;
  left: 0;
  right: 0;
  z-index: 999;
}

tars108

Almost perfect, thanks a lot for this, Saguaros.
Now it behaves like it should in FF and on Mobile (DuckDuckGo). On Chrome it behaves different, though. The Top Bars stay where they should, but once I scroll down on any page, I cannot fully go back up again. The top portion of the page stays hidden behind the top bars.

saguaros

tars108 Could you share screenshot highlighting the issue? I also tested on Chrome but it showed the same as other browsers.

tars108

Here it is.
After scrolling down and back up again I can only go up so far as it is seen on the picture. I just noticed that it behaves like this ONLY when I do it with the mouse wheel. If I am using the sidebar, the whole page goes up and down including the fixed header and navigation. With the mousewheel, header and navigation stay, and the only the rest of the page scrolls down (as it should), but not fully back up again

saguaros

tars108

You can use this custom css:

.scrollUp .t3-mainbody {
    padding-top: 129px;
}

It will show full mainbody content when you scroll up.

tars108

Super, everything works perfectly now. Case Closed 🙂