Customize Header & Footer

Layers User Guide  Since: 1.0 Last Updated: Layers ver. 1.5.5 Time to Read: 3 minutes

Header

Click the Header tab to expand the Header settings panel. Here you will see Styling which contains the layout, color and menu styling options.

Styling

Header Width

Choose either Boxed or Full Width.

  • The Boxed width will restrict the content of the header (the logo and menu links) to a maximum of 1040 pixels centered in the page.
  • Full Width will allow the header elements to expand to the width of the browser window (down to mobile screen sizes, where the header will convert into a mobile header)
Header Arrangement

Choose from one of five layouts by clicking the corresponding icon. Each icon provides a visual clue to what the layout does.

Logo Left

logo-left

Logo Right

logo-right

Logo Center Top

logo-center-top

Logo Top

logo-top

Logo Center

The Logo Center option will place the menu assigned to the Header Menu to the left of the logo, and the menu assigned to the Right Header Menu on the right.

logo-center

Your menus are set under the Menus panel in the main Customizer Menu.

Sticky Header

This section presents two options for controlling the behavior of your header bar. Check an option to enable it, or uncheck it to disable it.

Sticky will keep the logo and menu at the top of the browser window while scrolling. The following example shows a sticky header while the site is scrolled down:

sticky-header

Transparent Overlay will allow the header bar to overlap the slider widget or title container on pages, useful when you want a background texture or image to show through.

transparent-header

You may check both boxes for a combination.

When using the transparent overlay, it is important your Header background color choice and the background color of widgets at the top of your pages use a similar color scheme, as the links will automatically turn white or black based on the header background color on scroll. To customize link colors or header colors, see How to Customize the Header Menu Style

Header Styling

Available in Layers Pro, this section allows customization of the header background color and height and extra features such as a search bar in the header menu.

View Layers Pro Options

Page Title Styling

Page titles appear on list pages and pages using the “Blank Page” template they also include breadcrumb navigation. This section, available in Layers Pro, allows you to customize the title banner color, font color, height and spacing.

Click the back arrow in the Customizer nav bar to return to the main Header panel.

backarrow

Seeing “additional scripts” in your Header panel? Make sure you have updated Layers.

Available in Layers Pro, this section offers complete color customization of the header menu links and sub-menus.

View Layers Pro Options

Save your layout any time by clicking Save & Publish. Always save before manually refreshing the page!

savebutton

Return to the main Customizer menu by clicking the back arrow at the top-left.

backarrow

Footer Width

Choose a Layout for your site footer.

The Full Width layout will distirbute your footer column(s) across the full width of the viewer’s browser window, and is best used in combination with widget content that can fill out these areas well such as one widget column and a Layers Content Widget(ie not the default WordPress widgets).

The Boxed layout (default) limits the footer to a max of 1040px wide and keeps your content in line and centered with the rest of the layout.

Widget Areas

Choose from None to 4 widget areas. Each widget area represents one column in the Footer

  • 1 column = 100% width with a 2% margin
  • 2 columns = 1/2 width or 50%
  • 3 columns = 1/3 width or 33%
  • 4 columns = 1/4 with or 25%

Choosing None will display just the copyright/footer menu bar.

Copyright Text

Add some custom text to replace our default copyright. You may also add basic HTML here to insert things like links or small images.

Styling

Available in Layers Pro, this section offers advanced control of Footer background color and overall height.

Click the back arrow in the Customizer nav bar to return to the main Footer panel.

backarrow

Return to the main Customizer menu by clicking the back arrow in the top-left.

Learn More about Customizing Your Site