Header, footer and menu styles

Choose a header and footer template, pick how your menu looks on desktop and mobile, and set the footer's about text and copyright line.

On this page
  1. Header
  2. Menus
  3. Footer
  4. Switching templates

The header, menus and footer are the frame around every page of your site. Each is built from a template you pick in the Design editor, plus options that belong to that template. The links in the menu are managed separately on the Navigation page; this article is about how the frame looks.

  1. Open your site in the dashboard, choose Design, then Header.
  2. Pick a Header Template. Templates named Top Header put a bar across the top of the page; Side Header puts a vertical rail down one side and uses it as the menu on desktop and as a slide-in drawer on mobile.
  3. Adjust the template's options below. They differ per template, and commonly include:
    • Width, Height and Nav alignment for the bar.
    • Position: Static scrolls away with the page, Sticky pins to the top once you scroll, Fixed always overlays the page.
    • Background and Text colors. Leave them unset and the header follows your palette.
    • Scrolled background and Scrolled text for sticky or fixed headers once the page has been scrolled, plus Blur scrolled background and Shadow when scrolled.
    • Show social icons to display your social profiles in the header.

Tip: A sticky header that starts transparent looks best with a Scrolled background set, so the menu stays readable over your content further down the page.

The Header panel with the Header Template select and its options
The Header panel with the Header Template select and its options

With a top header, the menu is two separate pieces and gets two panels:

  • Desktop Menu - choose a Menu Template, then tune Menu layout (Menu font size, Menu font weight, Uppercase, Letter spacing) and Dropdown options (Dropdown shadow, Dropdown border, Dropdown corners).
  • Mobile Menu - choose a Menu Template for the drawer that opens on phones and tablets, tune Menu layout (Centre items horizontally, Centre items vertically, Separator lines, font size, weight, uppercase and spacing), and style the Toggle button that opens it.

With a side header, one menu serves every screen size, so there is a single Navigation Menu panel with a Navigation Template, a Menu layout block and the Mobile toggle button options.

Menu colors are not in these panels. All of them, including dropdown and mobile drawer colors, live in the Colors panel so every color on the site is in one place. See colors and color presets.

The menu items themselves, their order and dropdowns are edited on the Navigation page. See build your site menu.

  1. In Design, click Footer.
  2. Pick a Footer Template.
  3. Under Footer options, adjust the layout and colors (Content width, Vertical padding, Background, Text, Top border and so on), then the content fields:
    • Show social icons shows your social profiles in the footer.
    • Show "Powered by FolioPage" controls the small link back to FolioPage. On the Free plan it stays on; on Pro and Max you can turn it off.
    • About (on templates that have it) is a short line about you or your work, shown under your name.
    • Copyright is the line at the very bottom. Leave it empty to hide the line entirely; nothing is generated for you.

Your logo and site name appear in the footer too, controlled from the Logo & Favicon panel. See add your logo and favicon.

Switching templates

Templates can be changed at any time without touching your pages. Switching resets that template's options to its defaults; the footer's Copyright and "Powered by" settings are kept because they belong to the site, not the template. Changing between a top and a side header also changes which menu panels and menu color groups you see.

Every change saves automatically. When you are happy, click Update live site to push it to visitors. See why your changes do not show on the live site yet.

Related articles