Skip to main content
Practice

Menu Container Style

To arrange the menu list horizontally, set display: flex;.

Menu Container Style
.navbar .nav-menu {
  display: flex;
  align-items: center;
  background: white;
}

display: flex; is used to arrange the elements horizontally.

align-items: center; is used to vertically center-align the elements.

With this setup, the menu list will be arranged horizontally and vertically centered.


Menu Item Style
.navbar .nav-link {
  margin: 0 16px;
  font-size: 14px;
  font-weight: var(--weight-semibold);
}

Set margin: 0 16px; to space out the menu items.

margin: 0 16px; sets the top and bottom margins to 0 and the left and right margins to 16px.

The margin property can set values in the order of top, right, bottom, and left.

For example, margin: 2px 4px 6px 8px; sets margins for the top, right, bottom, and left in that order.

If this is confusing, you can also use the individual properties margin-top, margin-bottom, margin-left, margin-right.

Set the font size for the menu items with font-size: 14px;.

font-weight: var(--weight-semibold); sets the font weight.

var(--weight-semibold); uses a variable named --weight-semibold, which references a predefined font-weight value.

Want to learn more?

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