What is the Explorer Header Logo?

The Explorer Header Logo custom component places your station logo on the left hand side of the header section of your website. The placement of this component is consistent with best practices and helps keep your website well organized and easy to navigate. Because your website is displayed on various devices, two different versions of your logo are required to fit each resolution. This section demonstrates how to add the Explorer Header Logo component to your Bento site. 

 View the tutorial

Presentation

Desktop/Tablet	Mobile

How to implement the Header Logo

• From the main Bento administration dashboard, click Pages (Figure 1).

Figure 2

• In the Middle-Header section, click the Available Components dropdown menu and click Custom Component (Figure 3.1).
• Click Add Component (Figure 3.2).

Figure 4

• In the logo600_image, and logo940_image textboxes, type the URL of the image you wish to use or click the magnifying glass icon to search filer folders for the image you want to use (Figure 5.1). Use the table below to align textbox fields with each screen resolution.    
• In the logo_alt_text textbox, type the text you want users to see when they hover over your logo (Figure 5.2). This text should be descriptive of the image and is typically your station name.
• In the logo_mobile_image textbox,  type the URL of the image you wish to use or click the magnifying glass icon to search filer folders for the image you want to use (Figure 5.3).  THE MOBILE IMAGE MUST BE WHITE WITH A TRANSPARENT BACKGROUND in order to appear correctly on a dark background when displayed on smartphones. 
• In the logo_site_link textbox, type the URL of the website to which the logo clicks (Figure 5.4). The logo should link to your station website homepage. 
• Click Save (Figure 5.5).

Figure 5

• Click Preview site in the upper right side of the screen to view the page in a browser (Figure 6).

Figure 6

• Your header logo appears in the top left section of your webpage on the desktop version (Figure 7).

Figure 7

• Your header logo appears in white centered on mobile devices (Figure 8).

Figure 8