Setting up Headers and Footers

Header

From the Editor overview click Patterns > header and then on the preview itself to begin editing it directly

From here I would generally open up the Document Overview by clicking on the three bars in the top left menu.

And then I would click on the Block Settings button in the top right menu (just to the right of Save) before I started editing. This should make it easier for you to see all the blocks used inside the header and all their corresponding options.

If you are familiar with WordPress Gutenberg, you can now make whatever changes you see fit but generally the main container for the menu should always have an Anchor of “masthead” in Block Settings > Advanced

Mobile/Desktop Only

There may be times when an element in the header appears on the front end on mobile but not on desktop or vice versa (it will still be there in the editor preview). This is due to a CSS class of either “mobile-only” or “desktop-only” being added to the block in question.

Navigation Menus

You can set up multiple navigation menus and switch between them on any Navigation block. To set up a new menu, click on an existing Navigation block and then click the three vertical dots in the left sidebar and then Create New Menu.

When you’re done adding Page Links, you can then save the menu by clicking on the Save button in the top right corner.

Now if you click on the three dots in any Navigation block you can see your new menu saved as Navigation 2 for example. If you wish to rename it you have to go back to the main Editor page and then Navigation > Navigation 2 [for example] > Three Dots Icon > Rename.

Replacing the Header With An Existing Pattern

Your Swwift theme will come with several headers to choose from. To replace the current header, go to Patterns > Swift Headers then select the header you want and click the three dots icon and Duplicate.

Click on the pencil icon to start editing the new pattern. From the top right menu, select the three bars icon to open the Document Overview. Click on the three dots icon for the main container for the header and then Copy.

Then navigate back to your Header template part and click on the three dots icon for the main container there and click Add After.

Inside the paragraph block where the flashing cursor is, paste your new header.

Once successfully pasted, delete the old header leaving only the new one in its place.

Footer

You can find your site’s Footer template part by going to Patterns > Template Parts - Footer and clicking on the preview.

You can then edit the footer as you see fit or replace it with one of the theme’s existing footers using the method outlined previously in “Replacing the Header With An Existing Pattern”.