O'Reilly logo

Mastering Sass by Luke Watts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required