This design calls for a fixed top navbar with a significant color shift for hovered and active links. I've already applied some of these styles by setting appropriate variables. Let me point those out, and then we'll move on to make some necessary adjustments to the markup.

The less/_variables.less file is based on Bootstrap's variables.less file. I've customized the shades of gray as per previous projects. You'll see these in the topmost section of the file.

I've further adjusted the following navbar variables, adjusting its height, margin, colors, and hover colors specifically for this design:

// Basics of a navbar
@navbar-height:                    56px;
@navbar-margin-bottom:             0;
...
// Navbar links
@navbar-default-link-color:       @navbar-default-color;
@navbar-default-link-hover-color: #fff;
@navbar-default-link-hover-bg:    @gray;
@navbar-default-link-active-color: #fff;
@navbar-default-link-active-bg:  @gray-dark;

In addition, I've adjusted the variables for the navbar toggle:

// Navbar toggle
@navbar-default-toggle-hover-bg:    transparent;
@navbar-default-toggle-icon-bar-bg: @gray-lighter;
@navbar-default-toggle-border-color: transparent;

Finally, I've eliminated rounded corners from the navbar toggle as well as from any other elements in this design. This was easily accomplished by adjusting the three @border-radius- variables:

@border-radius-base:             0; // was 4px
@border-radius-large:            0; // was 6px
@border-radius-small:            0; // was 3px

Along with the custom variables, I've made a few adjustments to _navbar.less. I've adjusted the padding around .navbar-brand to allow the necessary space for our logo image:

.navbar-brand {
  float: left;
  // padding: @navbar-padding-vertical @navbar-padding-horizontal;
  padding: 12px 30px 0 15px; // to allow for logo image

I've also customized the list items in the expanded navbar, adding left and right padding and transforming the text to uppercase:

// Uncollapse the nav
  @media (min-width: @grid-float-breakpoint) {
 ...
    > li {
      float: left;
      > a {
        padding-top: ((@navbar-height - @line-height-computed) / 2);
        padding-bottom: ((@navbar-height - @line-height-computed) / 2);
        padding-left: 24px; // added
        padding-right: 24px; // added
        text-transform: uppercase; // added
      }
    }

When combined, the adjusted variables and navbar customizations yield these visual results:

Let's proceed on to the jumbotron with its big welcome message.