Header Options Tab

This article is relevant for Barton, Pearl, and Hayes theme users. Need help customizing the Rania, Presidio, Miramar, Brevier, or Archer Site Identity tab? Click here.
Looking for help on how to size your logo artwork? Read this Help Desk article.

The Header Options tab in the Barton, Pearl, and Hayes themes controls the layout of elements in the header area—that is, the area above your content on your blog. The header area typically contains your main navigation menus, and your site logo and tagline (if using). You can also add a site favicon in the Header Options tab.

This Help Desk article will dive into the various sub-tabs of the Header Options area, and how you can customize each.

HOW TO ACCESS THE HEADER OPTIONS TAB

The Header Options tab can be accessed by going to Appearance > Customize > Header Options. It is the second tab, directly under the "Welcome to [Theme Name]!" informational tab.

Clicking on the Header Options tab will display a series of sub-tabs that correspond to different parts of your site header.

Here's an example of how to access the Header Options tab in the Pearl theme. The Customizer will look nearly identical in both Hayes and Barton.

Below, we'll take a look at each of these sub-tabs.

SITE IDENTITY TAB

With logo artwork

Use the Site Identity tab to upload logo artwork, if you have it.
The Site Identity tab in Barton, Hayes, and Pearl allows you to upload a large image, crop, and resize the image directly within the Customizer.
- You can upload an image at virtually any size you wish, even as large as 1100px or even 1200px in width. After upload, the Customizer will prompt you to crop the image to your liking.
- After saving the crop edits, use the slider in the Customizer to change the overall width of the logo image. We generally recommend 380px as a great place to start (this is the default setting in the theme). Depending on the nature of your artwork, you can make it larger or smaller from there.

Here's a short video showing you these steps:

Without logo artwork

If you're not using your own logo artwork, use the Header Text Options section to type in your site name.
If you are using text for your site title and tagline, be sure you have turned Display Site Title and Display Site Tagline to ON.

In the example below, we've typed in the theme name "Pearl" and a tagline, which correspond to the site name and tagline you see displayed in the header.

FAVICON

At the bottom of the Site Identity tab is a space to upload your favicon. A favicon is the small graphic that appears next to your site name in a browser tab (see the example above). For WordPress, we recommend uploading your favicon at 512 x 512px.

HEADER LAYOUT

In this section, choose whether you would like your logo to be:

Stacked (centered) --> displays logo in the center of the header, with the primary menu featured underneath
Inline --> displays logo on the left side of the header, with the primary menu inline to the right of it, or
Stacked (left) (Barton theme only) --> displays logo on the left of the header, with the primary menu underneath it.

Here are examples of all three:

SOCIAL MEDIA

The Social Media tab allows you to add social media and other icons to your main navigation menus.

1. To enable, first ensure that Enable Social Media is turned to ON.

2. Next, choose a location.

If you'd prefer for your icons to appear in the top right of your blog, select a location of Top Right.
If you would prefer icons to appear after your Primary menu, choose After Primary Menu.
- IMPORTANT: If you have not yet assigned a menu to the "Primary" menu location, but assign your icons to appear after this menu, your social media icons will not appear! You must assign a menu to the primary location before these icons will be visible. For more on menus and menu locations, click here.
- Tip: If you select After Primary Menu, your social icons will generally look best if you are featuring three or fewer icons. The more icons you have, the longer the menu will become, which can look messy depending on how many total items you have in the Primary menu itself.
Barton users may also assign their social media icons to appear in the Top Left of the site, above the logo. This location is only compatible if you have chosen a Stacked (Center) or Inline header layout, under the Header Layout sub-tab.

Here are three visuals of how the social media icons look in the Top Right vs. After Primary Menu, as well as in the Top Left for Barton users who have selected either the Stacked (Center) or Inline header layouts.

3. To add a social media platform, simply type or paste in the corresponding URL. For example, the URL to our Instagram profile is https://instagram.com/empressthemes. By pasting in this URL, your theme automatically recognizes the platform, and will display the corresponding platform icon.

In the gray explainer tabs in the Social Media sub-tab, you can view all platforms for which the theme will automatically recognize the platform. A list of all supported platforms may also be found here.

4. You're not limited to adding social media icons to this menu! Our themes are coded to recognize URLs with /shop, /contact, or /subscribe appended to the end of the domain name. So, if you happen to feature a Contact page on your site (ex: yourblogname.com/contact), you can paste this URL in as well, and a contact icon will appear.

SEARCH

The Search sub-tab controls settings related to the search icon and modal window on your site.

Enable Search Button: To enable search (which we recommend!), ensure the Enable Search Button is set to ON.
Display Icon and Display Search Text: In order for users to access your search feature, either Display Icon and/or Display Search Text must also be turned to ON. You can opt to have one or the other, or both, but at least one must be turned ON.
Choose Location: Similar to the Social Media menu, the Choose Location option allows you to change whether the search feature lives in the Top Right menu, or after your Primary menu. Barton users may also assign their search icon to appear in the Top Left of the site, above the logo. However, this location is only compatible with the the Stacked (Center) or Inline header layouts.

SEARCH MODAL

The Search Modal section refers to the window that pops up when a user clicks on your search icon/text. Barton, Pearl, and Hayes have been styled with a modal window that "takes over" the screen, so users can type their query into a field.
In the Search Modal section, decide if you'd like for the Search Modal box to have a title, and if so, what the title should say.
- In our demos, we've used the title "What are you searching for?"

FEATURE TAB

The Feature Tab refers to the small button that can be placed in the top right of the site, or after your primary menu.

In our demos, it is rendered in a contrasting color, so the button stands out and draws attention. The Feature Tab is great for pushing users to external URLs or pages you want them to have easy access to. Great examples are Instagram, an LTK (LiketoKnow.it) page, a shop page, portfolio site, or a contact page. Here's a visual of the Feature Tab:

To use the Feature Tab:

1. First, ensure that Display Feature Tab is set to ON.

2. Next, choose a location. You may opt to feature the Feature Tab in the Top Right, as displayed above, or after the Primary Menu.

IMPORTANT: If you have not yet assigned a menu to the "Primary" menu location, your feature tab will not appear! You must assign a menu to the primary location before this button will be viewable. For more on menus and menu locations, click here.

3. In the Link Text field, type in what text you wish for the button to display.

4. In the Link URL field, type or paste in where the button should link.

5. If you're linking to an external site, we recommend turning the Open Link in New Tab setting to ON.

6. If you'd like to display an icon next to your button text, turn the Display Icon setting to ON. Just like with social media icons, the theme will automatically match your URL to the appropriate icon based on the available icons listed in the gray explainer tab beneath this setting.

If you'd prefer to use a custom icon, follow the instructions for copying and pasting a custom icon beneath this section.

SUBMENU: BARTON & HAYES THEMES ONLY

In the Barton and Hayes themes, the Feature Tab offers an optional sub-menu. You can view an example of this by clicking here, and hovering over the Feature Tab.

1. To enable the Feature Tab Sub-menu, navigate to Appearance > Customize > Header Options > Feature Tab.

2. Near the bottom of the options window, toggle the Enable Submenu setting to ON. Hit Publish within the Customizer to commit this change, and reload your browser window (this will ensure the change commits, and the new Menu Location appears in the Menus tab).

3. Next, you'll need to create a menu and assign it to this area. Navigate to Appearance > Customize > Menus. If you have a menu already created that you'd like to assign to the Feature Tab Sub-menu, simply click on that menu, scroll down, and under Menu Locations, check off Feature Tab Submenu.

4. If you don't already have a menu created for the Feature Tab Sub-menu, click Create New Menu. We recommend naming the menu "Feature Tab Sub-menu" so you'll be able to easily identify it in the future. Assign the new menu to the Menu Location Feature Tab Submenu. Click Next, then begin adding items to your menu, by clicking + Add Items. Once you're satisfied with the menu, you can hit Publish to save your changes.

SCROLL NAVIGATION

The scroll navigation appears on both mobile and desktop browsers as a reader begins to move down the page. It gives users access to your menu links without having to scroll all the way to the top of the page.

You may create a custom menu and assign it to the Scroll location (for more on building menus and menu locations, click here). Otherwise, your scroll navigation will display your Primary Menu by default (the menu either underneath your logo, or inline with it).

SCROLL NAVIGATION SETTINGS

In the Scroll Navigation tab, control settings related to what elements appear on scroll:

Enable Scroll Navigation: turns scrolling nav ON or OFF
Display Social Media: Hides or displays your social media links, if they have been setup as described above.
Display Search: Hides or displays your search icon/text, if it has been setup as described above.
Display Feature Tab: Hides or displays your Feature Tab, if it has been setup as described above.
Display Top Left Menu: If a menu has been assigned to the Top Left location, you can opt to display it in scroll nav by turning this setting to ON.
Display Top Right Menu: If a menu has been assigned to the Top Right location, you can opt to display it in scroll nav by turning this setting to ON.

UPLOAD YOUR LOGO

You may also opt to feature your logo artwork in the scroll navigation, if using. To add your logo artwork:

Be sure the Display Logo setting is turned to ON.
Then, upload your logo using the instructions listed.