CSS Floating Menu
This page contains code for a CSS floating menu bar.
Also known as "fixed menus" and "hovering menus", floating menus stay in a fixed position when you scroll the page. They appear to "float" on top of the page as you scroll.
Example of a Floating Menu
The menu to the left is an example of a floating menu. As you scroll down this page, you will notice the menu stays fixed in the same position on the screen (assuming your browser/user agent supports this feature).
Create A Floating Menu
It is actually very easy to create a floating menu bar. The operative code is
Having said this, you may have to play around a bit with the placement of your menu so that it doesn't get in the way of anything that it shouldn't.
Here is the CSS code that was used to create the floating menu to the side:
Feel free to change the width, color, and other properties as you wish (as long as you don't remove
As mentioned, you may also need to play around with the placement of your fixed menu. You can remove/change the
z-index:100 if you don't want the menu to float on top of everything.
Note that this code may not work in older browsers. This is because some older browsers don't support
position:fixed. If the above example doesn't work for you, this could be the reason. In that case, try using a newer browser.