THE WORLD'S LARGEST WEB DEVELOPER SITE

How TO - Fixed Menu


Learn how to create a "fixed" menu with CSS.



How To Create a Fixed Top Menu

Step 1) Add HTML:

Example

<div>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <p>Some text some text some text some text..</p>
</div>

Step 2) Add CSS:

To create a fixed top menu, use position:fixed and top:0. Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.

Example

/* The navigation bar */
.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

/* Links inside the navbar */
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Main content */
.main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
}
Try it Yourself »

How To Create a Fixed Bottom Menu

To create a fixed bottom menu, use position:fixed and bottom:0:

Example

/* The navigation bar */
.navbar {
    position: fixed; /* Set the navbar to fixed position */
    bottom: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}

/* Main content */
.main {
    margin-bottom: 30px; /* Add a bottom margin to avoid content overlay */
}
Try it Yourself »

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.