View Categories

Header & Footer

shayhayashi
Updated on October 18, 2024

2 min read

The header and footer are global elements designed to repeat across your entire site. This means you only need to modify them once in the parent component for the changes to reflect everywhere. Depending on the theme you purchased, you may have different header and footer variations. However, the editing process remains consistent across themes.

Where to Find Header & Footer Templates #

  1. Go to Bricks > Templates in your WordPress dashboard.
  2. Look for templates labeled “Header” or “Footer”.
  3. Click Edit with Bricks to begin editing.

Each template variation (e.g., Header – Dark) is designed for specific use cases. Make sure you’re editing the correct variation that corresponds with your site’s design (e.g., a dark header for pages with dark backgrounds). You can swap out these variations as needed.

Editing the Header #

Updating the Logo #

  1. Select the logo in the visual editor.
  2. Hover over the sidebar logo options and delete the existing logo.
  3. Upload your new company logo.
  4. Ensure the logo color offers enough contrast (e.g., if the original logo was white, this likely indicates the header is intended for a dark background).

Pro Tip: Add your business name in the Text field in the sidebar as backup in case your logo image fails to load.

Editing the Menu List (Navigation) #

While the logo and colors are changed in Bricks, the menu items are managed separately within WordPress.

  1. Go to WordPress Dashboard > Appearance > Menus.
  2. Select a menu to edit (e.g., Header Menu or Footer Menu).
  3. Change, remove, or add new menu items as needed.

Depending on the theme, you may find pre-made menus. For example, you might see:

  • Footer Menu – For the main navigation links in the footer.
  • Footer Terms & Disclaimers – For legal pages like terms of use and privacy policy.

Simply select the appropriate menu based on where it will appear on your site.

Switching Header/Footer Styles for Specific Pages #

Your template has pre-set Header/Footer assigned to the appropriate pages. However, if your theme offers multiple header styles, you can swap them easily.

Disabling/Switching Header/Footer Styles #

  1. In Bricks > Templates, locate the header or footer templates.
  2. Click Edit (NOT ‘Edit with Bricks’) on the style you don’t want to use.
  3. In the sidebar, click ‘Edit’ on the Status section and change to ‘Drafts’. Click ‘Ok.’
  4. Click ‘Save Changes.’
  5. Make sure that the header or footer style you want to use is set to ‘Published.’

Adding Header/Footer Style to a Specific Page #

If your theme includes multiple header or footer styles and you’d like to apply a specific one to an individual page, follow these steps:

  1. Locate the Template in Bricks
    • Go to Bricks > Templates in your WordPress dashboard.
    • Find the header or footer template you want to apply.
  2. Edit with Bricks
    • Click Edit with Bricks (make sure not to click just “Edit”).
  3. Access Template Settings
    • In the visual editor, click the gear icon (⚙️) in the top-left corner.
    • Select Template Settings from the dropdown.
  4. Set Conditions for the Template
    • Under Template Settings, go to Conditions > Add Condition.
    • Choose Individual to apply the style to a specific page.
  5. Select the Page
    • Begin typing the page name in the search field, and it will appear in the dropdown.
    • Select the desired page from the list.
  6. Save Your Changes
    • Click the Save icon in the top-right corner to apply the header or footer style to the selected page.

Pro Tips #

  • Multiple Headers/Footers: If you have multiple variations (e.g., “Header – Dark” or “Footer – Minimal”), be sure to choose the correct one for the page’s design.
  • Testing: After saving, preview the page to ensure the menu appears correctly and fits the style of the content.