WordPress.org

1. dusk000
   Member
   Posted 2 years ago #

   Hi guys is there a way to make the menu scroll down the page as the user scrolls down so it is always visible?

   Appreciate any help!

2. Sivar
   Member
   Posted 2 years ago #

   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.

3. dusk000
   Member
   Posted 2 years ago #

   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

4. Sivar
   Member
   Posted 2 years ago #

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

5. dusk000
   Member
   Posted 2 years ago #

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

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

6. Sivar
   Member
   Posted 2 years ago #

   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".

7. dusk000
   Member
   Posted 2 years ago #

   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?

8. Sivar
   Member
   Posted 2 years ago #

   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: http://miniajax.com/

   Check out the prototype window demo...

Topic Closed

This topic has been closed to new replies.