Styling the nav

In this section, we will style the navigation bar.

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

We use the .navbar class to style the <nav> tag.

Let's go through the applied properties one by one.

• position: fixed;: This fixes the navigation bar so it remains visible even when scrolling down.

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

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

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

• z-index: 10;: This uses the z-index property to keep the navigation bar above elements on the screen. Elements with higher z-index values appear above those with lower values.

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

Using position: fixed; and z-index: 10; ensures the navigation remains visible and won't be obscured by other elements, unless those elements have a very high z-index.

Since navigation bars are typically placed at the top of a webpage, properties like top: 0;, left: 0;, and right: 0; are used to position it there.

The background: white; property is used to make the navigation bar's background color white. Without this, the background could be transparent, making the navigation hard to see.

The position property specifies how an element is positioned in a document. It can take one of five unique values:

• static: Places the element according to the normal document flow. This is the default value for the position property.

• relative: Positions the element according to the normal document flow, and then offsets it relative to its current position.

• absolute: Removes the element from the normal document flow and positions it relative to its nearest positioned ancestor.

• fixed: Removes the element from the normal document flow and positions it relative to the viewport.

• sticky: Positions the element according to the normal document flow, and then offsets it based on scrolling.