Church Website Headers & Navigation Guide + 30 Examples

The backbone of a church website is its navigation. A poor navigation obscures the content and loses visitors, but a well-designed navigation will streamline the user experience by giving what they need when they need it.

Here are the latest trends in good church website navigation and headers.

Logo: Horizontal orientation. On the Left. Links to Home.

Most websites place their logo in the top left corner. The center (with navigation on either side) is also a viable option, such as in the case of Terra Nova. Tips include:

  • Link logo to home page: Even if you choose to have “Home” as a navigation element, the logo should still link to the home page. Users expect this functionality.
  • If you have both horizontal and stacked versions of your logo, you will want to use the horizontal version in most cases because it uses up less vertical page real-estate, which allows room for more site content before users have to scroll.
  • Stacked logos still can work if (1) you have a longer name (Celebration Church), (2) your navigation bar is higher than normal for another reason such as subtext (The Chapel), or (3) your logo is compact (City on a Hill).

Dropdowns: No Longer a Best Practice

Dropdowns are still popular, but user experience architects, designers, and SEO experts are increasingly discouraging their use. Reasons why include:

  • Studies have found that many people find dropdowns annoying.
  • By not having them you drive people to higher level pages first which give them a broader context before drilling down further.
  • You can still have subpages, just display them on the section page instead of in the website’s global navigation.
  • Dropdowns dilute rather than focus the “link juice” from the home page. If not coded properly, Google may struggle to understand them at all.
  • Dropdowns tend to encourage the creation of too many pages (I’ve been guilty of this in the past). Not having them encourages clarity and brevity through combining of the most important information up front.

Creative alternatives to the dropdown menu include:

  • Longer home page with the subnav included in each section (see Hillsong London). University of Colorado Denver (where I’m attending grad school) takes this a step further and adds a floating nav bar which jumps you up and down the page.
  • Provide the user with the context of an entire page simply through hovering over the navigation. For an example, hover over the main navigation on Gateway Scottsdale’s website.

Secondary Navigation: Use to Cut Down on Main Sections

The secondary navigation is used as way to cut down on primary navigation sections by moving a few frequently sought after pages into a smaller secondary nav bar. Common examples are Give, Contact, Login, Search, Calendar/Events. Tips include:

  • Use smaller text
  • Try to limit to 3 (not including Search)
  • Also a common place to find a locations dropdown or campuses button/link.

Social Icons: Move out of Header

Though a number of sites still displayed social icons in the headers, more and more of them seem to be moving them to the footer, a sidebar, or beneath the slider.

Navigation Subtext: Use Only When Truly Helpful

Subtext is an option, but it runs the risk of making things unnecessarily cluttered. Tips include:

  • Only use it if additional context is truly needed.
  • Avoid using if you have more than 5 sections.

Good Navigation Subtext

GOOD USAGE: The subtext is helpful and allows for the condensing of sections without loss of understanding.

  • JESUS It’s all about Jesus
  • VISIT Locations : About
  • CONNECT Groups : Ministries
  • SERMONS Training : Music
  • GIVE Donate : Serve

Poor Navigation Subtext

POOR USAGE: The subtext provides no real additional value and makes things unnecessarily busy.

  • ABOUT Who we are
  • CONNECT and get involved
  • NEXT STEPS for your journey
  • EVENTS to enjoy
  • GIVING back to the Lord
  • CONTACT Drop us a line

Church Website Navigation Examples

Fairhaven (Centerville, OH) – 4 sections

Fairhaven Navigation

Gateway Scottsdale (Scottsdale, AZ) – 4 sections
Note: Great use of subtext with fewer navigation options. Upon hovering over navigation a page-wide dropdown with a contextual large image and list of subpages appears. Feels like visiting a new page without having to click on anything.

Gateway Church Scottsdale

Grace Community Church (Simi Valley, CA) – 4 sections

Grace Community Church

Austin Stone Community Church (Austin, TX) – 5 sections
Note: Example of a “Show Campuses” link.

The Austin Stone Navigation

Brainerd Baptist Church (Chattanooga, TN) – 5 sections
Note: Though their sections built around vision/mission are creative, their meaning is less intuitive to the visitor.

Brainerd Baptist Church Navigation

City of Grace (Mesa, AZ) – 5 sections

City of Grace Navigation

Eagle Brook Church (Minneapolis, MN) – 5 sections
Note: The campus links in the upper left above main nav work well with this simple header. On a less simple header, you might want to use a single dropdown, link or button.

Eagle Brook Church Navigation

First Baptist Concord (Knoxville, TN) – 5 sections

First Baptist Concord Website

Rock Church (San Diego, CA) – 5 sections
Note: Another great use of subtext.

Rock Church Website

The Chapel (Chicago, IL) – 5 sections

The Chapel Navigation

Celebration Church (Jacksonville, FL) – 6 sections

Celebration Church Navigation

Central Christian Church (Mesa, AZ) – 6 sections

Central Christian Church Navigation

Christ’s Church of the Valley (Los Angeles, CA) – 6 sections

CCV Website

Christ Church of the Valley (Peoria, AZ) – 6 sections

Christ's Church of the Valley Navigation

Church of the Highlands (Birmingham, AL) – 6 sections

Church of the Highlands Navigation

City on a Hill (Melbourne, Australia) – 6 sections

City on a Hill Navigation

Elevation Church (Matthews, NC) – 6 sections

Elevation Church Website

Glide (San Francisco, CA) – 6 sections

Glide Navigation

Highpoint Church (Memphis, TN) – 6 sections

Highpoint Church

Imago Dei Community (Portland, OR) – 6 sections

Imago Dei Community Navigation (Oklahoma City, OK) – 6 sections Navigation

Potential Church (Fort Lauderdale, FL) – 6 sections

Potential Church

Terra Nova Church (Troy, NY) – 6 sections

Terra Nova Website

Central (Las Vegas, NV) – 7 sections

Central Navigation

Central Baptist Church (Jonesboro, AR) – 7 sections

Central Baptist Church Website

Christ Fellowship (Miami, FL) – 7 sections

Christ Fellowship Navigation

First Baptist Church (Woodstock, GA) – 7 sections

FBC Woodstock Website

Glad Tidings Church (Omaha, NE) – 7 sections

Glad Tidings Church Navigation

Scottsdale Bible (Scottsdale, AZ) – 7 sections

Scottsdale Bible Navigation

The City Church (Seattle, WA) – 7 sections

The City Church Navigation

For more church website inspiration, check out Church Relevance’s list of Great Church Websites.

Artists are a gift to the Kingdom…

Artists are a gift to the Kingdom, who woo awe from humanity with words, with song, and with what the eye sees. Sometimes it is beautiful. Sometimes it shocks and repulses. But at its heart, it creates awe for creation, which when at its best, leads mankind to awe and worship of God.

Hillsong’s Magazine-Style Church App

Hillsong's Magazine-Style Church App

Update: Stream the Hillsong Conference (July 2-8) for free via the app

  • View information about upcoming sessions
  • Add reminders for your favorite sessions and receive notifications when they are about to start
  • Keep in mind, Hillsong is in Australia, so you’ll probably need to use these reminders. Use the following calculations to correct for your local time.
    • Pacific + 17 hours (i.e. 16:30 Tuesday Sydney time = 23:30 Monday Pacific)
    • Mountain +16 hours (i.e. 16:30 Tuesday Sydney = 00:30 Tuesday Mountain)
    • Central + 15 hours (i.e. 16:30 Tuesday Sydney = 01:30 Tuesday Central)
    • Eastern + 14 hours (i.e. 16:30 Tuesday Sydney = 02:30 Tuesday Eastern)

Hillsong recently released a magazine-style church app (via iTunes) to aggregate all of their latest news and content from around the globe.

In case you didn’t know, Hillsong is more than just music. In fact, it is a global church with locations in Australia, Cape Town, London, Paris, Stockholm, Kiev, Amsterdam, Moscow, New York City, and more.

Rather than create an app focused around one single location, Hillsong wanted a way to share their story and encourage local churches globally. The finished product is the first magazine-style church app that I’ve come across. Acting a lot like Flipboard, it aggregates content from existing sources such as…

  • Hillsong’s key leadership team’s social streams
  • Hillsong TV (videos and messages)
  • Hillsong Music
  • The collective church blog, “Hillsong Collected”
  • Content centered around global issues of poverty and development
  • You can even stream their upcoming conference (July 2-8) via the app

Equally noteworthy are the things this particular magazine-style church app does NOT have

  • No direct links the Hillsong website
  • No contact information
  • No information about upcoming events
  • No links to donation options

Though they do include basic information about campuses (tap the globe in top left of home screen), Hillsong likely chose to excluded these other items to keep the focus on the global ministry’s brand, mission, and content. It makes complete sense in their context, but would it work well for a local church in a smaller context? Maybe… However, I’d personally consider ways to also provide easy access to some of the surprisingly absent content mentioned above. At a bare minimum, this could be a page with buttons linking to more information on the church’s website (as long as they make it clear that these will take users outside the app).

Not sure if a church app is right for your church? Check out 5 Reasons to Consider a Church App.