Knowledgebase

Select a Design Layout

StarChapter designs overlay your website content to provide a consistent look and feel across all pages and content sections. Design elements include the color scheme, font styling, background colors, and the placement of the logo and main navigation menu.

The Design Layout determines the placement of the logo, navigation placement, and hero image (Layout 04 only). Color schemes and font styling are customized for each system. Content is handled independently and remains highly flexible.

The examples below highlight differences between layout options. When reviewing them, consider the size, shape, and orientation of your organization’s logo. Notes below each design offer guidance to help narrow your selection. Content examples remain consistent across layouts to demonstrate how styling elements (color, fonts, and backgrounds) appear, not to reflect layout-based content differences.

S Series 01

Considerations for S Series 01

Works with most horizontal or vertical logos
Vertical logos can overlap content to reduce overall header area height
Perfect for those wanting the logo and navigation links aligned

Tip: Long horizontal logos may crowd the navigation area and reduce the number of visible links

Want more examples of this layout? View Here

S Series 02

Considerations for S Series 02

Ideal for square or vertically oriented logos
Utilizes vertical space for any amount of navigation links
Perfect for organizations wanting a side navigation

Tip: Long horizontal logos may appear too small or become difficult to read in this layout

Want more examples of this layout? View Here

S Series 03

Considerations for S Series 03

Works with most horizontal or vertical logos
Ideal for long horizontal logos
Maximizes horizontal space for many navigation links
Great choice for a centered logo with navigation links below

Tip: Tall vertical logos may significantly increase header height

Want more examples of this layout? View Here

S Series 04

Considerations for S Series 04

Works with most horizontal or vertical logos
Hero image fills the entire screen
No content (besides an optional caption) will not be visible until scrolling or navigating to another page
Perfect for new or highly image-focused organizations

Tip: Long horizontal logos may crowd the navigation area and reduce the number of visible links

Want more examples of this layout? View Here

S Series 05

Considerations for S Series 05

Works with most horizontal or vertical logos
Ideal for long horizontal logos
Maximizes horizontal space for navigation links
Perfect for organizations wanting a centered logo and navigation links above

Tip: Tall vertical logos may significantly increase header height

Want more examples of this layout? View Here

S Series 06

Considerations for S Series 06

Works with most horizontal or vertical logos
Ideal for long horizontal logos
Maximizes horizontal space to display navigation links
Perfect for organizations wanting a left aligned logo with more room for navigation links below

Tip: Tall vertical logos may significantly increase header height

Want more examples of this layout? View Here

S Series 07

Considerations for S Series 07

Works best with smaller horizontal logos or most vertical logos
Offers a unique navigation style by splitting links on either side of the logo
Perfect for organizations wanting a centered logo and navigation links aligned

Tip: Long horizontal logos may crowd the navigation area and reduce the number of visible links

Want more examples of this layout? View Here

S Series 08

Considerations for S Series 08

Works with most horizontal or vertical logos
Ideal for long horizontal logos
Minimalist design using a hamburger menu on desktop and mobile
Perfect for organizations seeking a clean, minimal header at first glance
Menu pop out provides maximum space for any amount of navigation links

Tip: Tall vertical logos may significantly increase header height

Want more examples of this layout? View Here