Skip to main content
Practice

Styling the nav

This time, we will style the navigation bar.

Styling the nav
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: white;
}

We will style the <nav> tag using the .navbar class.


Let's go through each property we have set.

  • position: fixed;: This fixes the navigation bar. It will remain visible even when the user scrolls down the page.

  • top: 0;: This positions the navigation bar at the top of the screen.

  • left: 0;: This positions the navigation bar on the left side of the screen.

  • right: 0;: This positions the navigation bar on the right side of the screen.

  • z-index: 10;: We use the z-index property to ensure the navigation bar stays on top. The z-index property sets the stack order of the element. Higher numbers are in front of lower numbers.

  • background: white;: This sets the background color of the navigation bar to white.

The navigation bar guides the user to navigate to different sections at any time, so we use position: fixed; and z-index: 10; to ensure it is always visible and not covered by other elements.

Because of this, the navigation bar will always be fixed on the screen, unless there are elements with a z-index higher than 10.

Navigation bars are typically placed at the top of webpages, so we set top: 0;, left: 0;, and right: 0; to position it at the top.

The background: white; property is used to give the navigation bar a clear background color. Without this, the background would be transparent and might not be easily visible.


The position Property​

The position property specifies the type of positioning method used for an element. The possible values for the position property are:

  • static: The element is positioned according to the normal flow of the document. This is the default value of the position property.

  • relative: The element is positioned according to the normal flow of the document and then offset relative to itself.

  • absolute: The element is positioned relative to its nearest positioned ancestor, or the initial containing block if there are no positioned ancestors.

  • fixed: The element is positioned relative to the browser window. It stays fixed even when the page is scrolled.

  • sticky: The element is positioned based on the user's scroll position.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.