Change Header Layout, Colors, and Height

To change the header layout, navigate to Appearance->Customize->Header & Navigation->Position & Style, and select your desired setting from the Header Layout select field. There are three options:

  • Inline
  • Stacked
  • Split

If you choose Split, make sure to set a menu for the Left Menu location. See Menus.

To change the colors and height of the header, use the other fields in this panel.

Sticky Header

To enable or disable the sticky header, navigate to Appearance->Customize->Header & Navigation->Position & Style, and select your desired setting from the Enable Sticky Header select field.

Screen Shot 2015-08-26 at 8.27.02 AM

In this panel, you can also set the colors and height of the sticky header.

Transparent Header

On individual pages, posts, and projects, you can set the header to be transparent so the background can show through. To do so, open up the desired page, post, or projects for editing and scroll to the Header Options panel and select Yes from the Transparent Header select field. You will also want to select a color scheme from the Color Scheme select field based on the background’s color. For example, if the image behind the header is dark, select Light.

Screen Shot 2015-08-26 at 8.53.55 AM

Slide Panel

The Slide Panel is accessed by clicking on the hamburger icon in the upper right corner of the header.

Screen Shot 2015-08-26 at 8.43.24 AM

By default, the slide panel acts as the mobile nav, but you can also set it to be visible at all times. To do so, navigate to Appearance->Customize->Header & Navigation->Slide Panel and select Yes from the Enable Slide Panel select field. From this panel you can also set colors and a background image for your Slide Panel. You can add widgets to the Slide Panel by navigating to Appearance->Widgets and adding widgets to the Slide Panel widget area.


To set your site logo image, navigate to Appearance->Customize->Header & Navigation->Logos. Here you can upload your logo image for the main header, sticky header, and dark and light color schemes for each.

Screen Shot 2015-08-26 at 3.37.43 PM

Your logo images should be twice as big as you want them to appear on the site. In the Header Logo Width fields enter the width of the logo image in pixels. We use this value to make sure your logo looks great on retina displays.