causeway-standard-theme/causeway/docs/shells/header.html

<div>
  <a id="header"></a>
  <header class="content-header">
    <h1 class="title">
      Header
    </h1>
  </header>

  <p>
    The header is comprised of 2 components (the site heading, incorporating the Causeway Logo, and the <a href="/docs/components/menus.html#menus-dropdown-site">site menu</a>) enclosed within <code>&lt;div&gt;</code> containers as shown below:
  </p>
  <p>
    This should be added immediately following to the opening body tag with the appropriate modifications to the title text and site menu.
  </p>
  <pre>
    <code>
      &lt;div class=&quot;container site-header&quot;&gt;
        &lt;div class=&quot;site-header-holder&quot;&gt;
          &lt;div class=&quot;site-heading&quot;&gt;
            &lt;div class=&quot;site-logo&quot;&gt;&lt;/div&gt;
            &lt;h1 class=&quot;page-title&quot;&gt;
              &lt;!-- The site title goes here --&gt;
            &lt;/h1&gt;
          &lt;/div&gt;
          &lt;!-- The site menu goes here --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    </code>
  </pre>

    <h1 class="title">
        Avatar
    </h1>

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

  <h1 class="title">
      Additional Site Menu Information
  </h1>
  <pre><code>
  &lt;div class=&quot;additional-nav-info&quot;&gt;
    &lt;span class=&quot;current-time&quot;&gt;08 May 2014 09:29:55&lt;/span&gt;
    &lt;span class=&quot;grey&quot;&gt;&lt;strong&gt;Causeway Ltd&lt;/strong&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>

  <h1 class="title">
    Breadcrumb
  </h1>
  <p>Example with a dropdown:</p>
  <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>
  <pre><code>
  &lt;ol class=&quot;breadcrumb&quot;&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Causeway LTD&lt;/a&gt;&lt;/li&gt;
    &lt;li class=&quot;dropdown&quot;&gt;
      &lt;a href=&quot;#&quot; data-toggle=&quot;dropdown&quot;&gt;Carillion
        &lt;span class=&quot;glyhicon caret&quot;&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Company A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Company B&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Company C&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;More&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  <br/>
  <p>Example without a dropdown:</p>
  <ol class="breadcrumb">
    <li><a href="#">Causeway LTD</a></li>
    <li><a href="#">Carillion</a></li>
  </ol>
  <pre><code>
  &lt;ol class=&quot;breadcrumb&quot;&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Causeway LTD&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Carillion&lt;/a&gt;&lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  <br/>
  <h1 class="title">
    Additional Menu (Three Line Menu)
  </h1>
  <p>Example:</p>
  <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>
  <br/>
  <pre><code>
  &lt;span class=&quot;additional-menu&quot;&gt;
    &lt;a href=&quot;#&quot; data-toggle=&quot;dropdown&quot;&gt;
      &lt;span class=&quot;glyphicon glyphicon-threeLine-menu&quot;&gt;&lt;/span&gt;
    &lt;/a&gt;

    &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Site Map&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Application Sample&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/span&gt;
   </code></pre>
</div>