Global Header

Global Header

Note: In production, the global header will be a sticky header (always fixed to the top of the page), will be full width, and will not have the top and side borders
<nav id="sampleNav" class="navbar navbar-default dnb-global-header">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
      <form class="navbar-form navbar-left" role="search">
        <div class="input-group">
          <div class="input-group-btn">
      <button type="button" class="btn btn-navbar-search-dropdown dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Company <span class="caret"></span></button></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#">Action 1</a></li>
                  <li><a href="#">Action 2</a></li>
                  <li><a href="#">Action 3</a></li>
                  <li><a href="#">Action 4</a></li>
                </ul>
          </div> <!-- /.input-group-btn -->
          
          <input type="text" class="form-control search" placeholder="Search...">

          <span class="input-group-btn">
            <button type="submit" class="btn btn-default btn-search"><i class="icon icon-search"></i><span class="sr-only">Submit</span></button>
          </span> <!-- /.input-group-btn -->
          
        </div>
      </form>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">Dashboard <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Menu Item</a></li>
        <li class="small-item small-item-first"><a href="#" class="alerts"><i class="icon icon-alert alert-badge"></i><span class="sr-only">Alerts</span></a></li>
        <li class="dropdown small-item">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="icon icon-user"></i><span class="sr-only">Profile</span><span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
filed under: