O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

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

Adding utility navigation

This project requires utility navigation to allow users to log in or register and to view their carts.

On medium, large, and extra-large viewports, we'll place this utility navigation in the very top-right corner of our banner area, as follows:

Adding utility navigation

On smaller screens, we'll display icons at the far right of the collapsed navbar:

Adding utility navigation

Notice that the collapsed navbar has a different color scheme; we'll discuss how to do this later on.

Now let's set the navbar changes up.

First, to give the logo a little more space in the the scss/includes/_header.scss ...

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