CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • Configuring the Header
  • Header examples

Was this helpful?

Edit on GitHub
Export as PDF
  1. Content Authoring
  2. Global settings

Header

PreviousFaviconNextSite slogan

Last updated 4 months ago

Was this helpful?

The header section appears at the top of your website. It comprises:

Configuring the Header

When you apply the Theme, it's applied to all four above mentioned sections of the header.

To apply the Light or Dark theme to the Header go to /admin/appearance/settings/<site-name> and use the radio buttons.

In this section you can also configure the Logo type.

Header examples

The examples below illustrate the Light and Dark theme applied to the header.

Light theme desktop

Light theme mobile

Dark theme Inline (logo) desktop

Dark theme Inline (logo) mobile

Dark theme Inline stacked (logo) desktop

Dark theme Inline stacked (logo) mobile

Note: the below examples only illustrate the Light and Dark theme, these don't give examples of the Header logo options. Go to the page for more logo examples.

Header logo
Site slogan
Header logos
Secondary navigation
Primary navigation
Light theme desktop Header with Logo set to Default
Light theme mobile Header with Logo set to Default
Light theme mobile Header with Logo set to Stacked
Dark theme desktop Header with Logo set to Inline
Dark theme mobile Header with Logo set to Inline
Dark theme desktop Header with Logo set to Inline stacked
Dark theme mobile Header with Logo set to Inline stacked
Screenshot of CivicTheme dark themed header