When placing the following CSS properties on a element (which is the menu in this case)
position: fixed;
top: 0;
It will stay "fixed" at the top of the page or parent element you have placed it in.
For positioning it further you can use the the right
, left
and bottom
properties.
More about the position
property can be found here.
Example:
.menu {
position: fixed;
top: 0;
height: auto;
width: 50px;
background-color: red;
}
<div class="menu">
<p>Some menu text</p>
<p>Some menu text</p>
</div>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>
<H1>Some Header text</H1>