Header Options Tab

  • This article is relevant for 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 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, as well as 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.

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


SITE IDENTITY


With logo artwork

Use the Site Identity tab to upload logo artwork, if you're using it. The Site Identity tab in Pearl and Hayes allow you to upload a large image, crop, and resize the image directly within the Customizer. With this in mind, 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, you can use the Header Text Options section to type in your site name. 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.

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.

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), with the primary menu featured underneath, or inline, meaning the logo is featured on the left, with the primary menu inline to the right of it. Here are examples of both:


SOCIAL MEDIA


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

  • To enable it, first be sure that Enable Social Media is turned to ON
  • 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, your social media icons will not appear! You must assign a menu to the primary location before these icons will be viewable. 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.

Here are two visuals of how the social media icons look in the Top Right vs. After Primary Menu.

  • 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. 

  • 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 would appear.

SEARCH


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

  • To enable search (which we generally recommend!), be sure the Enable Search Button is set to ON.
  • 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. 
  • 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.
  • The Search Modal section refers to the window that pops up when a user clicks on your search icon/text. 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, you can 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 a 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 that you want them to have easy access to. Great examples are Instagram, a LiketoKnow.it page, a shop page, or a contact page. Here's a visual of the Feature Tab:

To use the Feature Tab:

  • First, ensure that Display Feature Tab is set to ON.
  • Next, choose a location. You can 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.
  • In the Link Text field, type in what text you wish for the button to display.
  • In the Link URL field, type or paste in where the button should link.
  • If you're linking to an external site, we recommend turning the Open Link in New Tab setting to ON.
  • 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.

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, you can 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.