An example of how to create a fixed navbar with CSS|CSS Snippet|W3Docs

Source Code: (back to article)

Result: Report an issue

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

<style>

body {

margin: 0;

}

.navbar {

overflow: hidden;

background-color: #666666;

position: fixed;

top: 0;

width: 100%;

}

.navbar a {

float: left;

display: block;

color: #eeeeee;

text-align: center;

padding: 15px 18px;

text-decoration: none;

font-size: 18px;

}

.navbar a:hover {

color: #1c87c9;

}

.container {

padding: 18px;

margin-top: 35px;

height: 2000px;

}

</style>

</head>

<body>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        margin: 0;
      }
      .navbar {
        overflow: hidden;
        background-color: #666666;
        position: fixed;
        top: 0;
        width: 100%;
      }
      .navbar a {
        float: left;
        display: block;
        color: #eeeeee;
        text-align: center;
        padding: 15px 18px;
        text-decoration: none;
        font-size: 18px;
      }
      .navbar a:hover {
        color: #1c87c9;
      }
      .container {
        padding: 18px;
        margin-top: 35px;
        height: 2000px;
      }
    </style>
  </head>
  <body>
    <div class="navbar">
      <a href="#books">Books</a>
      <a href="#quizzes">Quizzes</a>
      <a href="#snippets">Snippets</a>
      <a href="#tools">Tools</a>
      <a href="#stringfunctions">String Functions</a>
    </div>
    <div class="container">
      <h1>
        The navbar stays in place while you are scrolling the web page.
      </h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam ipsum, maximus eu metus ac, semper tristique neque. Suspendisse sed finibus metus, dignissim blandit lorem. Praesent ornare lectus metus, ut aliquet est suscipit et. Quisque sollicitudin, lorem a efficitur euismod, elit elit interdum est, nec vehicula tortor est ut velit. Morbi blandit consequat lectus a auctor. Nulla sed dolor auctor, congue enim vel, blandit mi. Fusce arcu augue, cursus in mollis vitae, porta non magna.
      </p>
      <p>
        Integer condimentum id nisl in lacinia. Ut congue ante sit amet ligula scelerisque, nec gravida erat tempor. Pellentesque venenatis pulvinar aliquam. Sed consectetur dapibus faucibus. Ut volutpat eget turpis sed ultricies. Nunc ut risus sit amet tortor feugiat facilisis sit amet non dolor. Morbi elementum arcu tortor, eu vulputate sapien sollicitudin a.
      </p>
      <p>
        Duis dapibus dui eget est pellentesque, tristique pharetra elit imperdiet. Suspendisse quis quam sed nisi sodales faucibus. Donec quis sodales ex. Etiam molestie est ac ipsum scelerisque, ut bibendum metus molestie. Mauris porttitor ullamcorper faucibus.
      </p>
      <p>
        Integer vulputate venenatis iaculis. Vestibulum fermentum sodales lectus, in posuere lacus interdum eget. Suspendisse maximus, lectus id pellentesque molestie, mi ante placerat est, vel condimentum orci nisl vel lacus.
      </p>
      <p>
        Duis leo diam, viverra nec nulla et, accumsan commodo mauris. Sed id sollicitudin nunc. Praesent aliquet efficitur odio eget imperdiet.
      </p>
    </div>
  </body>
</html>