Fixed Menu Bar on Top of Website

When we log in Gmail or Facebook, there is a fixed menu bar on top of the web page. How is this being done? The answer comes to my mind after I read the tutorial in [1].

The trick is to use CSS property code position:fixed in your HTML element. Please refer to the following demo and sample code:

Demo

Source Code for Demo (html):

fixed.html | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Fixed Menu Bar on Top of Website</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="fixed-top">
    <a href="https://siongui.github.io/">this</a>
    <a href="https://www.google.com/">Google</a>
    <a href="https://www.facebook.com/">Facebook</a>
  </div>
  <div style="height: 600px; background: blue;">&nbsp;</div>
  <div style="height: 600px; background: yellow;">&nbsp;</div>
  <div style="height: 600px; background: green;">&nbsp;</div>
  <div style="height: 600px; background: gray;">&nbsp;</div>
</body>
</html>

Source Code for Demo (css):

style.css | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.fixed-top {
  position: fixed;
  top: 0;
  left 0;
  background: #66FFFF;
  width: 100%;
  height: 2em;
  line-height: 2em;
  word-spacing: 5em;
  z-index:100;
}

With the above code, no matter how you scroll the web page, the menu bar is always on top, which is the same as the menu bar on Gmail or Facebook.

References:

[1]CSS Floating Menu
[2]CSS Float
[3]CSS position
Powered by Github Pages, Pelican, pyScss.