Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Align nav bar vertically – help needed Reply To: Align nav bar vertically – help needed

#234683
TheDoc
Member

There are a couple of different issues here causing these to be misaligned. The first is an easy fix: <ul> by default has a padding-left applied to it. It doesn’t appear as though you’ve removed that. That’s as easy as:

.site-nav__list {
  padding-left: 0;
}

The other problem is that .site-nav__list-item has margin-left: 60px applied to all items. Unfortunately, that is going to cause things to be misaligned, too. You’ll want to do something like this:

.site-nav__list-item:not(:first-child) {
  margin: 0 0 0 60px;
}

This will apply a margin-left of 60px to all list items except the first child.