Making responsive adjustments

On small screens, the elements of our page header may overlap:

We need to move the toggle to the left-hand side of our navbar. This can be done as follows:

1. Open the scss/includes/_header.scss file in your editor and add the following SCSS code to it:

             header[role="banner"] { 
               .navbar-toggler { 
               float: left; 
               } 
             } 
   

2. Save and compile these changes, and you'll see the navbar toggle shift to the left end of the collapsed navbar, as shown in the following screenshot:

So far so good.

Now to address the problem of crowding by hiding the text for all devices except for screen readers on the collapsed navbar. In an uncluttered collapsed navbar, the icons will be enough to communicate the point, especially if we make the icons larger. Let's do that:

1. In the html/includes/_header.html file, place span tags around the text within each link of our utility-nav class, as follows:

            <li>&lt...