Objective
From Header→Details, you can choose to have the header always displayed on Desktop devices. You can select where the logo is displayed, whether a custom header will be configured, whether the header is to extend the full width of the site or centered, and determine whether to display the Sign In Widget and Locale Selector.
From Header→Logo, you can upload the logo for the header. For the Click URL (href) field, we recommend using the relative link (/) to represent Home.
From Header→Menu, you build the links for the header.
To add the header links, click Add and select the type of link you want to add:
Use the External type to link to external sites or to other pages on the CSB career site. When linking to an external site, always select YES for New Session, so the page opens in a new window.
To link to another page on the CSB career site, select NO for New Session. See more information under View All Jobs.
When linking to another page on the career site, use relative links whenever possible so that the URL does not need to be replaced when moving the site from Stage to Production.
Some examples of relative links:
/ = Home pages – often used for Headers, Footers, Logo, when placed on a different branded page
/Red/ = Home page for the Red brand
/search/ = View All Jobs – used in the Header, Featured Jobs component
/Red/search/ = View All Jobs for only the Red brand
The first screen capture shows how to create a header link to the Default Brand home page.
The second screen capture demonstrates how to link to the Red home page from the Default Brand.
The Text is what displays in the header. The Title is mouse-over text and additional information used by screen readers for users with a visual disability. Remember that for accessibility purposes, Title and Text should always be labeled differently.
Note that locale is "sticky," meaning that the locale does not need to be called-out when using a relative link.
You can select additional customization options for the header by selecting Header Style: Custom from the Details page. A different header layout can be configured for each brand and locale, and for desktop and for mobile devices. You can have a mix of custom and default header styles on your career site.
In this example, the customer requested that the logo appear at the top left, with the menu options to the right. Below that, a line was added across the full width of the page. Below the line, a text box was added in the center of the page, with the Sign in and Language component to the right.
To create this custom header, three rows were added. Each row can hold a maximum of four slots. For this example, the Header Menu was expanded to fill three slots, the Line spans all four slots, and the Text component spans the middle two slots. The arrow buttons are used to expand and contract the slot sizes. View the following screen capture to see how the example above was configured. Once created, currently the rows and components cannot be moved, so plan the header carefully before beginning to configure.
Customizing Header Components
The components that can be added to a custom header are shown below. The Sign-in and Language component is required. The logo for a custom header can be added from either the Logo component or Image component. To use a logo that is optimized for different display settings (such as desktop and mobile), use the Logo component.
From Appearance→Styles→Footers, enter any text you would like to display in the footer, and determine whether the footer is to extend the full width of the site or be centered. If you select YES for the Footer Image, the Logo menu will be displayed. Configure the footer logo in the same way as the header logo.
If you select YES for the Footer Image, the Logo menu will be displayed. Configure the footer logo in the same way as the header logo.
Select either Row Menu or Column Menu to add links to the footer. In the example shown, both the Row Menu and Column Menu have been configured.
To configure links in the Column Menu, click Add to add a new list of links that will appear in a column. The text you enter in the Text field of the link list will be the column header for the links. You can choose to leave this blank, if a column label is not desired.
This page is the same as the Header Menu Setup page, except the List option does not appear in the Type dropdown menu. Click Add and select the type of link you want to add.
Row Menu
Social Links are presented in the footer. In the Social Links area, add the desired links, and enter the company’s preferred URL for their social networks. Leading practice is to only include social networking links that are specific to job seekers.
You have added to the Default Brand a Content page for Diversity and a Category page for Onsite Jobs. Now you will add header links to those pages.
From the Best Run site, navigate to the Default Brand and click on Why Work Here in the header. This is where the link to the Diversity page should reside.
In CSB, navigate to Appearance→Styles→Headers→English→Default Brand. Explore the Details and Logo pages.
Click to open the Menu page and use the pencil icon to explore the existing headers for the Default Brand.
Click the pencil icon next to Why Work Here. Notice that this link is the List Type, which means that it is a dropdown list with selectable items beneath it. Also notice that title text has been entered, which is a leading practice for accessibility. In this case, the text is Why Work Here, which displays in the header, and the title is Learn about Our Company (mouse-over text and also used by screen readers).
Click +Add under Link List.
For Type, select Content.
Under Content Link at the bottom, click the dropdown for Search for Content Page, and select Diversity English Default Brand. Notice that Diversity was entered automatically for the Title and Text.
Change the Title to Learn about Our Diversity Initiatives.
Click Ok and Yes at the prompt.
Click Close.
Save and Preview. Test the link from Why Work Here in the Default Brand header.
Perform the same set of steps to add the Onsite Jobs Category page to the Best Run header.
Add the link under Career Opportunities on the Menu page.
For Type, select Category Link.
For Category Link at the bottom, select Onsite Jobs.
For Title, enter Navigate to Onsite Jobs.
After saving, preview and test the link from Featured Jobs in the Default Brand header.
Note
The header links were only updated for the home page of the English language Default Brand. These steps would need to be repeated for other locales and brands. We will not do that in this exercise.