Change my Menu Floating

HTML & CSS
1

I would like to make Main Menu as floating Menu. (in the same position while scrolling the page). I tried the position to absolute and fixed, still missing something. Any recommendation. Here is the site : Technical Tips

2

http://www.w3.org/Style/Examples/007/menus.en.html

3

If you want your whole header as a fixed positioned header then do this:

Nest a new inner element inside #headerwrap. e.g.


<div id="headerwrap">
  <div id="fixed">
  
  .... rest of header content etc...

  </div><!-- end fixed -->
</div><!-- end headerwrap -->

Then add this code:


#fixed {
    height: 150px;
    margin: auto;
    width: 978px;
}
#header{position:fixed}

The extra div is needed to enable the auto centering so that when you add the fixed positioned element it is in the right position and needs no co-ordinates (otherwise it will move to the co-ordinate specified and not remain centred).

Note that an fragment identifiers (in-page links) referenced in the page will scroll up under the fixed header. This is an issue with all fixed elements and cannot easily be fixed. If you don;t have in page links then it should not be an issue.

If you meant that you only wanted your menu to remain fixed when it reached the top of the window then that is only accomplished with a script and there are plenty of those around to choose from.

4

Paul, You are the life saver. It is working in my text site and I will implement soon.