Navbar

<nav class="navbar nav navbar-expand-sm modus-header bg-white" id="modusHeader">
  <button class="btn btn-lg btn-icon-only btn-text-dark" id="menuButton" data-modus-item="menu-btn" href="#overview" data-toggle="#">
    <i class="modus-icon material-icons">menu</i>
  </button>
  <a href="#navbar-example" class="navbar-brand mr-auto ml-2">
    <img src="https://modus-bootstrap.trimble.com/img/trimble-logo.svg" width="107" height="25" class="img-fluid d-none d-sm-block" alt="home">
    <img src="https://modus-bootstrap.trimble.com/img/trimble-icon.svg" class="d-block d-sm-none" height="25" width="25" alt="home">
  </a>
  <div class="collapse navbar-collapse">
    <div class="navbar-nav ml-auto">
      <button class="btn btn-lg btn-icon-only btn-text-dark" data-toggle="tooltip"
         data-placement="bottom" title="Notifications">
        <i class="modus-icon material-icons">notifications</i>
      </button>
      <button class="btn btn-lg btn-icon-only btn-text-dark" data-toggle="tooltip"
         data-placement="bottom" title="Help">
        <i class="modus-icon material-icons">help</i>
      </button>
      <button class="btn btn-lg btn-icon-only btn-text-dark" data-toggle="tooltip"
         data-placement="bottom" title="Applications">
        <i class="modus-icon material-icons">apps</i>
      </button>
    </div>
  </div>
  <button class="btn btn-lg btn-icon-only btn-text-dark d-block d-sm-none">
    <i class="modus-icons">more_vertical</i>
  </button>
  <button class="btn btn-lg btn-icon-only btn-text-dark bg-transparent border-white"
         data-toggle="tooltip" data-placement="bottom" data-html="true"
         title="<div class=text-left>MyTrimble<br>Stephanie Carter<br>stephanie_carter@example.com</div>">
         <i class="modus-icon material-icons rounded-circle">account_circle</i>
  </button>
</nav>