main-header.html

<link rel="import" href="../polymer-1.4.0/polymer.html">
<link rel="stylesheet" href="../bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/corporate-ui/corporate-ui.css">

<link rel="import" href="behaviors/global-behavior.html">
<link rel="import" href="behaviors/state-behavior.html">

<dom-module id="ks-main-header">
  <template>
    <style>
      :host {
        display: block;
      }
      @media (max-width: 991px) {
        :host .navbar-default {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          /*z-index: 1030;*/
        }
        :host .navbar-default .navbar-header[short-name]:not([short-name='']) {
          font-size: 0;
        }
        :host .navbar-default .navbar-header .navbar-symbol:after {
          height: 58px;
        }
        :host .navbar-default .navbar-header[short-name]:not([short-name='']):after {
          display: inline-block;
          font-size: 16px;
          vertical-align: middle;
          content: attr(short-name);
        }
        :host .navbar-default .navbar-header[short-name]:not([short-name='']) button {
          font-size: 1.8rem;
        }
        :host .navbar-default .navbar-toggle:after {
          display: block;
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
      }
    </style>
    <nav class="navbar navbar-default" hidden="[[hidden]]">
      <div class="navbar-header" short-name$="{{shortName}}">
        <a href$="{{siteUrl}}" class="navbar-brand"></a>
        {{siteName}}
        <a href$="{{siteUrl}}" class="navbar-symbol"></a>
        <nav class="nav navbar-nav navbar-right">
          <content></content>
        </nav>
      </div>
    </nav>
  </template>

  <script>
  Polymer({
    is: 'ks-main-header',
    behaviors: [CUIBehaviors.GlobalBehavior, CUIBehaviors.StateBehavior],

    properties: {
      siteName: String,
      shortName: String,
      siteUrl: {
        type: String,
        value: '/'
      }
    },
    attributeChanged: function (name, type) {
      this.header(this.getAttribute('disable') == 'true');
    }
  });
  </script>

</dom-module>