NationBuilder

Headliner is a fresh, bold theme designed to organize a captive audience. As a responsive theme, it works seamlessly across devices. (See a <a href="http://headliner-theme.nationbuilder.com/" target="_blank" rel="nofollow noopener noreferrer">demo</a>.)

<a href="http://en.wikipedia.org/wiki/Responsive_web_design" target="_blank" rel="nofollow noopener noreferrer">Responsive theme</a>: Design automatically adjusts and optimizes to fit the size of your screen (iPhone/iPad/Desktop ready)

Off canvas nav when viewing the theme on a mobile device

Off canvas sidebar to maximize content area

Featured Content Sliders that span the entire width and height of your window to better showcase your featured images

The calendar homepage widget is scrollable if more than five events are displayed

Include page <a href="https://support.nationbuilder.com/website/configure-your-website/nationbuilder-stock-theme-guidelines">excerpts on homepage</a>

Widget that links to the public bios of recent supporters of your nation

- <a href="http://en.wikipedia.org/wiki/Responsive_web_design" target="_blank" rel="nofollow noopener noreferrer">Responsive theme</a>: Design automatically adjusts and optimizes to fit the size of your screen (iPhone/iPad/Desktop ready)
- Inline sign in flow
- Off canvas nav when viewing the theme on a mobile device
- Off canvas sidebar to maximize content area
- Featured Content Sliders that span the entire width and height of your window to better showcase your featured images
- The calendar homepage widget is scrollable if more than five events are displayed
- Customizable icons
- Include page <a href="https://support.nationbuilder.com/website/configure-your-website/nationbuilder-stock-theme-guidelines">excerpts on homepage</a>
- Staged donations
- Widget that links to the public bios of recent supporters of your nation

Since the logo overlaps the navigation bar background, it should be prepared in a transparent PNG format.

Since Featured Content Sliders span the browser area, slider images are suggested to be at least 1024px wide, with an aspect ratio of around 16:9 (for a 1024px wide image, the height should be around 576px).

The top navigation will change to an off canvas nav when viewing Headliner on a mobile device such as an iPhone or iPad. Tap the icon with three lines to the left of your site name or site logo to activate the menu.

You can override icons by first cloning Headliner, and then editing the <code>_icons.scss</code> file. Icons are displayed via a span class. To change the icon, simply change the properties of those classes.

The recommended header image size 1024x204px (1024px wide image, with a height 204px).

If both a header image and a Featured Content Slider are enabled, only the Featured Content Slider will be displayed.

Blog pages will arrange blog posts in a tiled format, with an image attachment of each post set as its respective tile's background image.

The content background will become transparent when a site background image is used.

If a site background image is used, it should be 1366px wide by 768px high or larger.

Navigation links will align left if the nav bar spans multiple rows.

Navigation link alignment, login form overlay display, sidebar/supporter nav display and positioning, calendar homepage widget container behavior, and other dynamic features are driven by the headliner.js script in the Files tab of your theme.

To split the default single address field into separate fields, use the instructions provided <a href="https://support.nationbuilder.com/en/articles/7282930-create-individual-address-fields-on-forms-by-theme#h_9e450304ea">this article</a>.

- Since the logo overlaps the navigation bar background, it should be prepared in a transparent PNG format.
- Since Featured Content Sliders span the browser area, slider images are suggested to be at least 1024px wide, with an aspect ratio of around 16:9 (for a 1024px wide image, the height should be around 576px).
- The top navigation will change to an off canvas nav when viewing Headliner on a mobile device such as an iPhone or iPad. Tap the icon with three lines to the left of your site name or site logo to activate the menu.
- You can override icons by first cloning Headliner, and then editing the <code>_icons.scss</code> file. Icons are displayed via a span class. To change the icon, simply change the properties of those classes.
- The recommended header image size 1024x204px (1024px wide image, with a height 204px).
- If both a header image and a Featured Content Slider are enabled, only the Featured Content Slider will be displayed.
- Blog pages will arrange blog posts in a tiled format, with an image attachment of each post set as its respective tile's background image.
- The content background will become transparent when a site background image is used.
- If a site background image is used, it should be 1366px wide by 768px high or larger.
- Navigation links will align left if the nav bar spans multiple rows.
- Navigation link alignment, login form overlay display, sidebar/supporter nav display and positioning, calendar homepage widget container behavior, and other dynamic features are driven by the headliner.js script in the Files tab of your theme.
- To split the default single address field into separate fields, use the instructions provided <a href="https://support.nationbuilder.com/en/articles/7282930-create-individual-address-fields-on-forms-by-theme#h_9e450304ea">this article</a>.

Features:

General Guidelines: