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.

Creating a floating menu is very simple and quite painless. The operative code is position:fixed.

Example of a Floating Menu

The menu below an example of a floating menu. As you scroll down the page/(frame), you will notice the menu stays fixed in the same position on the page.

<!DOCTYPE html>
<title>Example</title>
<style>
  body {
    background-image: url('/pix/samples/bg1.gif');
  }
  main {
    margin-bottom: 200%;
  }
  .floating-menu {
    font-family: sans-serif;
    background: yellowgreen;
    padding: 5px;;
    width: 130px;
    z-index: 100;
    position: fixed;
  }
  .floating-menu a, 
  .floating-menu h3 {
    font-size: 0.9em;
    display: block;
    margin: 0 0.5em;
    color: white;
  }
</style>
<main>
  <p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>
  <nav class="floating-menu">
    <h3>Floating Menu</h3>
    <a href="/css/">CSS</a>
    <a href="/html/">HTML</a>
    <a href="/coldfusion/">ColdFusion</a>
    <a href="/database/">Database</a>
  </nav>
</main>

Click Preview to see the example in a full-sized screen.

Floating Menu Position

The above menu floats from its relative position on the page. That is, when the page loads, the menu first appears in the position it appears in the source code.

You can change this if needed.

Use the top, bottom, left, and/or right to position the menu exactly where you want it on the page. Regardless of where the menu is located within the source code, it will appear exactly as you specify it in the source code.

Here, we fix the menu to the bottom right of the page.

<!DOCTYPE html>
<title>Example</title>
<style>
  body {
    background-image: url('/pix/samples/bg1.gif');
  }

  main {
    margin-bottom: 200%;
  }

  .floating-menu {
    font-family: sans-serif;
    background: yellowgreen;
    padding: 5px;;
    width: 130px;
    z-index: 100;
    position: fixed;
    bottom: 0px;
    right: 0px;
  }

  .floating-menu a, 
  .floating-menu h3 {
    font-size: 0.9em;
    display: block;
    margin: 0 0.5em;
    color: white;
  }
</style>
<main>
  <p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>
  <nav class="floating-menu">
    <h3>Floating Menu</h3>
    <a href="/css/">CSS</a>
    <a href="/html/">HTML</a>
    <a href="/coldfusion/">ColdFusion</a>
    <a href="/database/">Database</a>
  </nav>
</main>

Feel free to change the width, color, and other properties as you wish. As long as you don't remove position:fixed your menu should remain fixed.

How to Ensure the Menu is On Top

The above code uses z-index to layer the menu on top of the other elements.

You may need to change this if you use other elements with a higher z-index value. For example, if another element has a value of say, 200, you could make the menu 201 or even 2000 — as long as it's a higher value than the other elements it will remain on top.

Older Browsers

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.