If you are not familiar with them, first read about headers in the LLIR website. Before you modify a header, take the time to be comfortable with the concept of conditional headers. All visitors to the website see the Public Header first because the Kadence theme is customized to check the condition user logged in. When a member logs in, Kadence displays the Member Header.

The first step in modifying a headers is to make sure you work on the correct header. Then proceed with caution because changing the headers can affect the look of the entire website.

Selecting a Header for Editing

Unlike the website in Kadence tutorials, the LLIR website has more than one header and all headers are conditional. The theme remembers which header was modified last and calls that the Previewing Header.

  1. In the WordPress dashboard, select Appearance and Customize.
  2. When the Customize panel appears on the left of the WordPress window select Header.
  3. The next panel you see contains a blue box near the top labelled Previewing Header.
    A page with previewing header appears on the top right and above the panel in which you customize the appearance of the header.
    If what you see on the right is the header you want to edit, you can skip forward to the next section: Changing the Header Settings.
  4. To edit a different header, scroll to the bottom of the panel on the left and click Conditional Header.
  5. When a list of all defined headers appears on the left, use the dropdown under Current Previewing Header to select the header you want to edit. Click the button Confirm, Save Settings.

The header you selected is now the previewing header.

Changing the Header Settings

  1. Make sure the page displayed on the upper right shows the header that you want to modify.
  2. Note that the two tabs above the header-settings panel labelled Desktop and Tablet/Mobile. Usually, you must make the same changes to both versions of the header so that they look as similar as possible on large screens and smart phones. The two versions of the public and member headers vary in the following ways:
    • Only the Tablet/Mobile version displays the sentence Hold your phone horizontally for best viewing. at the top of the header.
    • Some of the spacing/margins/padding is adjusted to for legibility on a mobile device. These differences are subtle and hard to see.
    • You can add fewer items to the header on a mobile device.
  3. Do not proceed until you have followed and practiced the techniques shown in the section on headers of the Deep Dive into Kadence Theme tutorial.
  4. If you want to practice, you can use either of two headers not used in this website: Default or Default Header. The Default Headers was deliberately set up to display both the public and private menus.
  5. As you make changes, you can see the effect immediately in header displayed on the upper right. Whenever there are unpublished changes, the Publish button on the upper left becomes active.
  6. Click Publish when you are ready to apply your changes to the live website. You publishing, you can continue to work so you can complete a set of modifications a bit at a time. If you leave the dashboard or click the X on the upper left, all changes not published are lost.

Test Thoroughly

After making any changes, test all headers on both a large screen and a smart phone.

See Also

The Kadence website contains an excellent tutorial on creating conditional headers.