Dynamic menu that moves horizontaly as the user scrolls the page

You could try using fixed positioning of your menu’s div using css:

div.menu {
position: fixed;
top: 10px;
left: 10px;
}

This is just an example, but should place the menu-div always in the top left corner of the browser window. Adjust that example to your needs.

Should that go in my sidebar.php like:

<style type=”text/css”>

div.menu {
position: fixed;
top: 10px;
left: 10px;
}
</style>

I can’t get it to work like that, help!
Cheers

No, but before we continue, post a link to your page plz and describe, what menu (or sidebar) you want to have fixed.

Work in progress:
https://www.vampress.com.au/buttons

menu on the left sidebar, made up of pages.
Cheers

Well, maybe this doesn’t work with floating, and you end up with a real mess, but let’s try… go into your style.css and find:

#menu {
  width:210px;
  float:left;
  }

Change that to:

#menu {
  position: fixed;
  top: 160px;
  left: 40px;
  width:210px;
  float:left;
  }

I just guessed, what the exact position of that sidebar might be, so feel free to experiment with the values of "top" and "left".

That worked! Appreciated!

Only issue is trying to get the positioning right again.
Top is ok, but it is initially too far to the left.
If I adjust left: 200 it looks ok at a higher screen res but if I change the browser window size and make it smaller the menu can overlap into the content. I don’t believe this was happening before, the menu was in the same place relative to the header image and content no matter what resolution or browser size.

Maybe this is a position: fixed; issue and I can have it one way or another?

Any thoughts?

Well, I don’t think, there is a nice and pretty way out of this (with css), if you want to keep the whole page in the middle of the browser window, but you can always use Ajax: https://miniajax.com/

Check out the prototype window demo…