Header

The header is comprised of 2 components (the site heading, incorporating the Causeway Logo, and the site menu) enclosed within <div> containers as shown below:

This should be added immediately following to the opening body tag with the appropriate modifications to the title text and site menu.

    
      <div class="container site-header">
        <div class="site-header-holder">
          <div class="site-heading">
            <div class="site-logo"></div>
            <h1 class="page-title">
              <!-- The site title goes here -->
            </h1>
          </div>
          <!-- The site menu goes here -->
        </div>
      </div>
    
  

Avatar

    
        <div class="account-management dropdown">
            <div class="user-avatar">
                <img src="../images/image_placeholder.png">
            </div>
            <div class="user-info">
                <a data-toggle="dropdown" href="#">Hello Guest
                    <span class="fa fa-chevron-down"></span>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a>Logout</a>
                    </li>
                </ul>
            </div>
        </div>
    
  

Additional Site Menu Information

  <div class="additional-nav-info">
    <span class="current-time">08 May 2014 09:29:55</span>
    <span class="grey"><strong>Causeway Ltd</strong></span>
  </div>
  

Breadcrumb

Example with a dropdown:

1. Causeway LTD
2. Carillion
   • Sub Company A
   • Sub Company B
   • Sub Company C
   • More

  <ol class="breadcrumb">
    <li><a href="#">Causeway LTD</a></li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Carillion
        <span class="glyhicon caret"></span>
      </a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sub Company A</a></li>
        <li><a href="#">Sub Company B</a></li>
        <li><a href="#">Sub Company C</a></li>
        <li><a href="#">More</a></li>
      </ul>
    </li>
  </ol>
  

Example without a dropdown:

1. Causeway LTD
2. Carillion

  <ol class="breadcrumb">
    <li><a href="#">Causeway LTD</a></li>
    <li><a href="#">Carillion</a></li>
  </ol>
  

Additional Menu (Three Line Menu)

Example:

• Site Map
• Application Sample

  <span class="additional-menu">
    <a href="#" data-toggle="dropdown">
      <span class="glyphicon glyphicon-threeLine-menu"></span>
    </a>

    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Site Map</a></li>
      <li><a href="#">Application Sample</a></li>
    </ul>
  </span>