How can I change the size of my header image?

I uploaded my header image under Websites > Settings > Header Image but it is automatically resizing it to the width of the page (960px). How do I customize the width of my image if I don't want it this size?

Submitted

Official response from Jason Meer

You can override this default in your NationBuilder theme. Please note that you need to be using a custom theme. You can learn more about that here.

To adjust the size of your header, go to Websites > Theme > layout.html.
Once inside of this file, find {% if site.has_header_image? } and edit the width attribute on the line below as desired:

Share this post

Showing 6 reactions

How would you tag this suggestion?

Add comment (optional)

Sign in with

Facebook Twitter

Donald Gerard

Donald Gerard commented
I changed the image tag to <img src=“%7B%7B%20site.header_image_url_1170%20%7D%7D” width=“1170” border=“0”> then uploaded an image that was 1170px wide, but then nothing (no image) appeared in the header. Ideas?
posted 2015-09-09 04:32:38 -0700

commented

We tried the above suggestion on the new Aware template. We cloned it to create a custom them but the layout.html has the following syntax:

 {% if site.has_header_image? %}
        &lt;div class="width-container"&gt;
         &lt;img src="%7B%7B%20site.header_image_url_1026%20%7D%7D" class="header-image" border="0"&gt;
&lt;/div&gt;
        {% endif %}

        {% if page.features_count &amp;gt; 0 %}
          &lt;div class="width-container"&gt;
           {% include "features" %}
          &lt;/div&gt;
        {% endif %}

We added width=“500” but that has no impact to the custom theme. Any ideas ?

posted 2014-03-16 10:17:59 -0700

Ian Patrick Hines

Hines Digital
Hines Digital
Certified Architect
Certified Expert

Ian Patrick Hines commented
Hey Kevin — It’s sounds like you’re trying to do some pretty substantial custom theming work (beyond what we’d be able to support here in this comment thread). Perhaps you might consider partnering with a NationBuilder Architect?
posted 2013-09-30 13:47:26 -0700
Kevin Grandia

Kevin Grandia commented
Okay, but if you just change the width to something larger, the image only pushes to the right of the header not across the entire top of the banner. For example, changing the width to px 1234 (<a href=“/”><img src=“%7B%7B%20site.header_image_url_960%20%7D%7D” width=“1234” border=“0”></a>)

Looks like this: http://d3n8a8pro7vhmx.cloudfront.net/makingwaves/pages/1/attachments/original/1380323568/width_of_banner.jpg?1380323568

How do we make it so the banner runs full width all the way left and right.

Also, then how to make the tab bar also run full length so it corresponds to the width of the new header width?

Life is just more questions than answers!
posted 2013-09-27 16:14:30 -0700
Jason Meer

NationBuilder employee

Jason Meer tagged this with Important

posted 2013-06-06 18:56:36 -0700
Jason Meer

NationBuilder employee

Jason Meer tagged this with Advanced

posted 2013-04-03 11:18:16 -0700