<div class="c-header c-navbar">
  <div class="container-fluid">
    <div class="row u-flex-align-center">
      <div class="col-sm-4 col-md-7 col-lg-7 hidden-xs">
        <div class="c-header__title pull-left">
          <span class="flexicon flexicon-flexmls--pin"></span>
        </div>
        <div class="hidden-xs hidden-sm">
          <ul class="c-nav c-nav-tabs" data-flexmls="nav-tabs">
            <li class="active"> <a data-toggle="tab" data-target="#search"> Search </a> </li>
            <li> <a data-toggle="tab" data-target="#hotsheet"> Hot Sheet </a> </li>
            <li> <a data-toggle="tab" data-target="#contacts"> Contacts </a> </li>
            <li> <a data-toggle="tab" data-target="#saved"> Saved </a> </li>
            <li class="c-badge-holder">
              <a data-toggle="tab" data-target="#messages"> Messages </a>
              <div class="badge"> 10 </div>
            </li>
            <li> <a data-toggle="tab" data-target="#members"> Members </a> </li>

            <li class="dropdown">
              <a class="c-nav-item--more" data-toggle="dropdown" data-target="#">
                More <span class="flexicon flexicon-90 flexicon-chevron--small"></span>
              </a>
              <ul class="dropdown-menu"> </ul>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-xs-12 col-sm-8 col-md-5 col-lg-5 c-navbar--right">
        <div class="c-search-input hidden-xs hidden-sm">
          <span class="flexicon flexicon-search"></span>
          <input class="form-control" placeholder="Find an Address, MLS #, or Contact...">
          <button class="flexicon flexicon-close" style="display: none;">
        </div>
        <div class="c-navbar--mobile">
          <a href="#" class="c-navbar__item active hidden-md hidden-lg">
            <div class="flexicon flexicon-search--large"></div>
          </a>
          <a href="#" class="c-navbar__item hidden-md hidden-lg">
            <div class="flexicon flexicon-flame--large"></div>
          </a>
          <a href="#" class="c-navbar__item hidden-md hidden-lg">
            <div class="flexicon flexicon-avatar--large"></div>
          </a>
          <a href="#" class="c-navbar__item hidden-md hidden-lg">
            <div class="flexicon flexicon-file--large"></div>
          </a>
          <a href="#" class="c-navbar__item c-badge-holder--icon hidden-md hidden-lg">
            <div class="flexicon flexicon-bars--large"></div>
            <div class="badge"> 10 </div>
          </a>
          <div class="dropdown">
            <a href="#" class="c-navbar__item" data-toggle="dropdown" data-target="#">
              <div class="c-avatar c-avatar--small">ab</div>
            </a>
            <ul class="dropdown-menu dropdown-menu-right">
              <li>
                <div class="c-user__header">
                  Albert Brown<br>
                  <span class="c-username">albertbrown123</span>
                </div>
              </li>
              <li class="divider"> </li>
              <li> <a> My Profile </a> </li>
              <li> <a> My Listings </a> </li>
              <li class="divider"> </li>
              <li> <a> Send Us Feedback </a> </li>
              <li> <a> Visit Full Site </a> </li>
              <li> <a> Change User </a> </li>
              <li class="divider"> </li>
              <li> <a> Log Out </a> </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tab-content c-nav-tabs__content">
  <div class="tab-pane active" id="search"> Search </div>
  <div class="tab-pane" id="hotsheet"> Hot Sheet </div>
  <div class="tab-pane" id="contacts"> Contacts </div>
  <div class="tab-pane" id="saved"> Saved </div>
  <div class="tab-pane" id="messages"> Messages </div>
  <div class="tab-pane" id="members"> Members </div>
</div>

<script>
jQuery(function ($) {
  $('.c-search-input').flexSearchInput();
});
</script>