title: Creating A Fixed/Sticky Logo in CSS/HTML
body: <p>I'm wondering if someone could help me e to create a fixed/sticky header... Not quite sure how to make this happen with CSS or HTML (sorry, I'm a neophyte).</p>
  
  <p>My site is <a href="http://www.oliviafialkow.com/" rel="nofollow">http://www.oliviafialkow.com/</a> and I would like my logo to stay fixed as visitors scroll down the page, like this example: <a href="http://lockebride.tumblr.com/" rel="nofollow">http://lockebride.tumblr.com/</a></p>
  
  <p>Any help would be wonderful--thanks!</p>
  
  <hr>
  
  <p>My header HTML is as follows:</p>
  
  <p></p>
  
  <pre><code>            &lt;div class="logo"&gt;
                  {{^customize.images.logo.url}}
                  &lt;!--No Logo--&gt;
                  &lt;h1&gt;&lt;a href="{{site.url}}"&gt;{{site.title}}&lt;/a&gt;&lt;/h1&gt;
                  {{/customize.images.logo.url}}
                  {{#customize.images.logo.url}}
                  &lt;!--Logo Uploaded--&gt;
                  &lt;h1&gt;&lt;a href="{{site.url}}" title="Home"&gt;&lt;img src="{{customize.images.logo.url}}" alt="{{site.title}}"&gt;&lt;/a&gt;&lt;/h1&gt;
                  {{/customize.images.logo.url}}
              &lt;/div&gt;
  </code></pre>
  
  <p>My header CSS is:</p>
  
  <pre><code>/***** site_name color *****/
  .logo h1 a {
      color: {{{customize.colors.site_name}}};
  }
  
  
  /***** subtitle color *****/
  .logo h2 {
      color: {{{customize.colors.subtitle}}};
      position: fixed
  }
  </code></pre>
  
  <p>Thank you!</p>