# Need help with navbar

**URL:** <https://forum.getkirby.com/t/need-help-with-navbar/20851>\
**Category:** Questions\
**Tags:** v3\
**Created:** [January 19, 2021, 1:00am UTC](https://forum.getkirby.com/t/need-help-with-navbar/20851 "2021-01-19T01:00:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![DoctorNumberFour](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/doctornumberfour/32/8281_2.png) [@DoctorNumberFour](https://forum.getkirby.com/u/DoctorNumberFour)\
**Post date:** [January 19, 2021, 1:00am UTC](https://forum.getkirby.com/t/need-help-with-navbar/20851/1 "2021-01-19T01:00:04Z")

</div>

trying to make my tree menu behave like the navbar on, say, kirby’s documentation, such that it doesn’t scroll back up/reset when i switch pages. i am vigorously stumped on this, and with little js knowledge, i don’t know how to google my way out of it yet. any help is appreciated.

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [January 19, 2021, 8:20am UTC](https://forum.getkirby.com/t/need-help-with-navbar/20851/2 "2021-01-19T08:20:24Z")

</div>

I think you are after a sticky header. It is possible to do it with pure CSS and you can do it with a Javascript too with something like this plugin [GitHub - rgalus/sticky-js: Library for sticky elements written in vanilla javascript](https://github.com/rgalus/sticky-js)

---

<div class="post-metadata">

**Author:** ![DoctorNumberFour](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/doctornumberfour/32/8281_2.png) [@DoctorNumberFour](https://forum.getkirby.com/u/DoctorNumberFour)\
**Post date:** [January 19, 2021, 10:55pm UTC](https://forum.getkirby.com/t/need-help-with-navbar/20851/3 "2021-01-19T22:55:42Z")

</div>

i already have that part, we have 2 separate scrolling containers for the menu and the content. what i need is for the menu to be in the same state (ie scrolled to the same place, same items collapsed) when i go to another page that has it. sorry, question may have been misleading, `s/nav/side/g`

---

<div class="post-metadata">

**Author:** ![bruno](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/bruno/32/6422_2.png) [@bruno](https://forum.getkirby.com/u/bruno)\
**Post date:** [January 20, 2021, 4:49pm UTC](https://forum.getkirby.com/t/need-help-with-navbar/20851/4 "2021-01-20T16:49:40Z")

</div>

If you want it in the _exact same state_, maybe you could save these states (scroll position and which menus are open) in a session? [Sessions | Kirby](https://getkirby.com/docs/guide/authentication/sessions)

Edit: acutally, that might be a bit overkill. Maybe use `localstorage` or `sessionstorage` instead:

> <https://stackoverflow.com/questions/50944547/how-can-i-share-js-variables-between-pages/50944608#50944608>

[https://developer.mozilla.org/en-US/docs/Web/API/Web\_Storage\_API/Using\_the\_Web\_Storage\_API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)

The idea would be that you set a short timeout if a scroll event occurs on the menu container, and then store `container.scrollTop` in `localstorage` or `sessionstorage`. On page load, retrieve that value and set the scroll value on the container.

```auto
const menuContainer = document.querySelector('.your_menu_class');
let t;

menuContainer.scrollTop = localStorage.scrollTop;

menuContainer.addEventListener('scroll', function() {
  let scrollTop = menuContainer.scrollTop;
  clearTimeout(t);

  t = setTimeout(function() {
    localStorage.scrollTop = scrollTop;
  }, 300);
});

```

Alternatively, you could use AJAX/PJAX to fetch only the page content that changes between pages. That way, you won’t have to update the menu container at all. Here’s how that works: [https://pjax.herokuapp.com/](https://pjax.herokuapp.com/)  
There’s also libraries for it, like [https://barba.js.org/](https://barba.js.org/). Another nice side effect is that pages load a lot faster :~)

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [January 20, 2021, 7:24pm UTC](https://forum.getkirby.com/t/need-help-with-navbar/20851/5 "2021-01-20T19:24:17Z")

</div>

Or check out the JavaScript in the [getkirby.com](http://getkirby.com) repo on GitHub.

---

<div class="post-metadata">

**Author:** ![DoctorNumberFour](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/doctornumberfour/32/8281_2.png) [@DoctorNumberFour](https://forum.getkirby.com/u/DoctorNumberFour)\
**Post date:** [January 20, 2021, 7:56pm UTC](https://forum.getkirby.com/t/need-help-with-navbar/20851/6 "2021-01-20T19:56:15Z")

</div>

thanks for the many, MANY suggestions. I’m sure one of them will work, and now I have a list of stuff to go through. : )

edit: also, for those coming across this, pretty sure js has some “before page unload” listener somewhere, will prob use that