Mastering Sass

The header

The first section we need to finish laying out is the header. This includes the top nav and the main nav. First let's add some padding to each list item in the top nav. We'll also add some styles to make each list item stack on mobile screens and then go inline on small screens up.

We're going to add a $spacing variable, which we'll reuse a lot in our layout for properties such as padding and margin. We'll set the default padding/margin to 1em, however for the nav-menu-items 0.5em will look better.

At the very top of scss/style.scss add the $spacing variable set to 1em:

$spacing: 1em;  

Now open the scss/components/_top-nav.scss file and add the following:

.top-nav { overflow: hidden; &-menu-item { padding: $spacing / 2; display: block; @include ...