Click on the collapse toggle navigation (the hamburger button) and you will see how the #nav-menu looks so messy, as shown in the next screenshot. We must fix it just like the way we did in the last web application example:

To do this, we will first need to remove the .pull-right class from #nav-menu. The .pull-* classes add a float to the element by applying the !important flag, which cannot be overridden. In this case, we must override this style rule to remove the .pull-right class and add the float to the current element style rule:

#nav-menu {
  float: right;
}

Create a media query for extra small devices for #nav-menu and remove the float: right:

@media(max-width:48em){
  #nav-menu {
    float: none;
  }
}

After that, we must hide #nav-profile and move its button to the #nav-menu list. First, add the .hidden-xs class to the profile element:

<div id="nav-profile" class="btn-group pull-right hidden-xs">
    …
</div>

This will prevent the element from appearing for extra small devices using the Bootstrap viewport helper class. Then, in #nav-menu > ul, append the options that were in the #nav-profile drop-down button:

<div id="nav-menu" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li>…</li>
    <li class="visible-xs">
      <a href="#">Profile</a>
    </li>
    <li class="visible-xs">
      <a href="settings.html">Setting</a>
    </li>
    <li class="visible-xs">
      <a href="#">Logout</a>
    </li>
  </ul>
</div>

Note that we make this new item list visible only for extra small viewports with the .visible-xs class.

These new item lists must now look just like the notification one, already present in this list. So, append the selector of the new item list to the current CSS style of #btn-notification:

#btn-notifications .btn-link,
#nav-menu li a {
  padding-top: 1.5rem;
  color: #252830;
  font-weight: 500;
}

The opened list should look like this:

Now, try to change the viewport and see how the elements on the header correctly change its visualization. The #nav-profile will appear only for small-to-large viewports and will shrink into #nav-menu ul in a small visualization for extra small viewports.

If you click on the notification list to open it, you will see three problems: firstly, the badge holding the number of new notifications jumps to the right portion; then the notification button is not filling the entire width; and finally, the notification list can appear a little nicer when opened.

To fix the jumping badge on the notification button, just add the following CSS:

@media(max-width:48em){
  #nav-menu #btn-notifications > .badge {
    right: inherit;
    left: 10rem;
  }
}

Note that we use a media query to change the position of the badge for extra small viewports only.

To modify the notification button's width, we have to create a media query as well. So, add this CSS style to it:

@media(max-width:48em){
  #btn-notifications,
  #btn-notifications > button {
    width: 100%;
    text-align: left;
  }
}

This style will change the width for both the notification button dropdown and the button itself.

Finally, the style for the notification list must be changed. We create the next CSS rule in our main.css file, and it should instantly look good:

@media(max-width:48em){
  #notification-list {
    margin: 1.25rem;
    margin-left: 2rem;
    background-color: #e5e9ec;
  }

  #notification-list a {
    background-color: #FFF;
    opacity: 1;
  }
}

Awesome! Update your web browser and #notification-list should look like what is shown in this screenshot:

Where are the items of the left menu? If you check out the HTML of #side-menu, you will see that we have added the .hidden-xs class to it. So, we must move the navigation options to another place in this extra small viewport.

Let's add the links to #nav-menu ul just as we did for #nav-profile:

<div id="nav-menu" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li>…</li>
    <li class="visible-xs">
      <a href="#">Audience</a>
    </li>
    <li class="visible-xs">
      <a href="#">Finances</a>
    </li>
    <li class="visible-xs">
      <a href="#">Realtime</a>
    </li>
    <li class="visible-xs">
      <a href="#">Projects</a>
    </li>

    <li role="separator" class="divider visible-xs"></li>
    …
  </ul>
</div>

Modify the maximum height of #nav-menu when collapse is toggled with the style:

#nav-menu.navbar-collapse {
  max-height: 39rem;
}

For the .divider element in the list, create the following CSS:

#nav-menu .divider {
  height: 0.1rem;
  margin: 0.9rem 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

Notice that in #nav-menu ul, the notification button will appear above the new elements added and the options from #nav-profile will appear below. The next screenshot represents the visualization of the final arrangement of the #nav-menu toggle:

The .round-charts inside the #pie-charts element does not appear correctly aligned. However, we can quickly fix this with two CSS rules using media queries. So, create the following style:

@media(max-width:48em){
  .round-chart,
  .round-chart canvas {
    display: block;
    margin: auto;
  }

  .round-chart + .round-chart {
    margin-top: 2rem;
    float: none;
  }
}

Refresh the web page and see the result, like the following screenshot:

Great! Now we have our dashboard nailed for every viewport and device! That was a thorough task, but with a great payoff, because we have now created a complete dashboard. Let's move forward to some other pages in our example.