Responsive Nav Bar Bootstrap

by Rowan Hamilton

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <header class="sectionContainer headerSection">

    <!-- NAVIGATION DESKTOP -->
    <nav class="section pmiNavbar pmiNavbar--desktop hidden-xs">
      <div class="inner">

        <!-- MAIN NAVIGATION -->
        <div class="pmiNavbar__mainNav">

          <!-- LOGO DESKTOP -->
          

          <!-- MENU LIST -->
          <ul class="mainNav__menuList root">
            <li class="mainNav__menuList__menuItem"><a href="#"></a></li>
            <li class="mainNav__menuList__menuItem"><a href="#"></a></li>
            <li class="mainNav__menuList__menuItem"><a href="#"></a></li>
            <li class="mainNav__menuList__menuItem"><a href="#"></a></li>
          </ul>

          <!-- USER OPTIONS -->
          <div class="userSection">
            <div class="userSection__dropdownToggle" data-toggle="dropdown">
              <div class="userSection__userAvatar">
                <img class="" src="http://www.screeninsults.com/images/tommy-boy-beer2.jpg" alt="User Avatar">
              </div>
              <i class="userSection__caret"></i>
            </div>
            <ul class="userSection__userMenu">
              <li class="userSection__userMenu__menuItem"><a href="#" >User Name Here</a></li>
              <li class="userSection__userMenu__menuItem"><a href="#" >Help</a></li>
              <li class="userSection__userMenu__menuItem"><a href="#" >User menu item</a></li>
              <li class="userSection__userMenu__menuItem"><a href="#" >Logout Button</a></li>
            </ul>
          </div>
        </div>

        <!-- SUB NAVIGATION -->
        <div class="pmiNavbar__subNav"...

CSS

.headerSection {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
}

.inner {
  width: 1170px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

[class^="icon-"], [class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: middle;
  background-image: url("/less/custom/");
  background-position: 14px 14px;
  background-repeat: no-repeat;
  margin-top: 1px;
}

.pmiNavbar--mobile .pmiNavbar-toggle i {
  /*background: url("http://www.placehold.it/50x50");*/
  width: 20px;
  height: 19px;
  display: inline-block;
}



.pmiNavbar__mainNav {
  height: 60px;
}

.pmiNavbar__logo {
  padding: 15px 0 0 0;
  height: auto;
  width: auto;
  float: left;
  
}

.mainNav__menuList {
  padding: 0;
  list-style: none;
  float: left;
}

.mainNav__menuList__menuItem {
  display: inline-block;
  padding: 20px;
}

.mainNav__menuList__menuItem a {
  font-size: 16px;
  padding-bottom: 12px;
}

.userSection {
  float: right;
  padding-top: 5px;
  width: 90px;
  cursor: pointer;
}

.userSection__userAvatar {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 10px;
  border-radius: 50%;
  overflow: hidden;
  text-align: center;
}

.userSection__userAvatar img {
  width: auto;
  height: 100%;
}

.userSection__dropdownToggle {
  width: 90px;
  float: right;
}

.userSection__caret {
  display: inline-block;
  margin-bottom: 20px;
}

.userSection__userMenu {
  display: none;
}

.userSection.open > .userSection__userMenu {
  display: block;
}

.userSection.open .userSection__caret {
  background-position: -60px -20px;
}

.userSection__userMenu {
  width: 200px;
  float: right;
  position: absolute;
  top: 80px;
  right: 0;
  padding: 5px;
  list-style: none;
}

.userSection__userMenu:before {
  content: " ";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  /*border-bottom: 10px solid #000;*/
  position: absolute;
  top: -10px;
...