Navbar fixed top after scrolling

See also the index of all tips.

How to fix navbar at top in bootstrap

How to change size of navigation bar html

Navbar fixed-top bootstrap 5

Sticky navigation bar on scroll css

Fixed menu example

On this page:

A pinned-down menu

The menu you see on the right on this page is simply a UL list. But, it stays fixed when you scroll the page. (You may have to make the window smaller to get a scroll bar first.) All the work to make it stay in place is done by rules in the style sheet.

Here is the mark-up of the menu, it is taken straight from the source of this page:

<ul id=menu> <li><a href="#L384">Section 1</a> <li><a href="#details">Section 2</a> <li><a href="#FAQ">Section 3</a> </ul>

In a browser without CSS, or with CSS turned off, it will just be a normal list with links.

But with CSS, thanks to the rules below, it will appear to “float” on top of the page, pinned to the right side of the browser window:

#menu { position: fixed; right: 0; top: 50%; width: 8em; margin-top: -2.5em; }

The interesting rule here is the '', that makes the DIV stay fixed on the screen.

The '' and '' determine where the DIV is displayed, in this case:

how to create a fixed side navigation bar in html

how to set background color in navigation bar in html