Overview

The Station Header custom component provides a similar look to the PBS.org header, allowing you to present users with a familiar website appearance and functionality on your station site.

There are two menu styles from which to choose and both menu styles can be assigned at the menu item level. Your entire menu does not have to be one or the other. 

The following are the two types of menus:

  • Dropdown - allows linked text menu items
  • Mega Menu - allows linked text and image menu items

Requirements

  • Your logo should be a maximum width of 120 pixels and maximum height of 70 pixels.
  • You can add up to eight (8) menu items  The character limit for all eight combined (including spaces) is 90 characters. 
  • You can add up to ten (10) sub-menu items. 

Example

Desktop/Tablet
Mobile

How to implement the Station Header

 View the dropdown menu tutorial

 

  • In the Header section of your Bento site, click the plus sign (Figure 1.1) and in the Header Components section, click Station Header (Figure 1.2).

Don't see Station Header component? Make sure you are in the Header section of your page. The Station Header component will not appear in any other sections of your page.

Figure 1

  • Hover the image icon and click Select Image (Figure 2). 

Figure 2


  • When your filer folder appears, click the downward-facing arrow next to the image you want to use (Figure 3).

Your image should have a maximum width of 120 pixels and maximum height of 30 pixels. 

Figure 3


  • Your station logo appears on the left side of the header (Figure 4.1).
  • Hover your mouse over the menu and click Menu Item (1/8) (Figure 4.2). 

Figure 4

  • Click Menu Link and type the name of your first link (Figure 5).

Figure 5


  • After you've typed the label for your first link (Figure 6.1), click the link icon located above the label (Figure 6.2).

Figure 6 

  • Type the URL of an external link you want to use or click Page to link the menu item to a page on your Bento site (Figure 7.1).
  • Click Save (Figure 7.2). 

Figure 7


  • Click Menu Item to add your next menu item (Figure 8).

Figure 8


  • After you've added all of your menu items, click the red Menu Link to add a link you want to call out from the others, such as a Donate link (Figure 9).

Figure 9


  • Link your menu item in the same fashion as all other menu items (Figure 10.1).
  • Click anywhere outside of the menu to exit the menu (Figure 10.2).

Figure 10


  • Click Save to save the page and click Preview to view your station header in a browser (Figure 11).

Figure 11


  • Your station header displays (Figure 12).

Click the red Menu Link text on the far right of the menu and type Donate or whatever action you'd like to call out.

Figure 12


How to implement the Mega Menu

  • Once you've implemented the Station Header and added menu links, click the menu link under which you want to add a Mega Menu (Figure 1.1).
  • In the left side navigation menu, click Mega Menu (Figure 1.2).

Figure 1

  • The Mega Menu is placed in the lower section of the Station Header. Hover over the Mega Menu and click the layout icon (Figure 2.1).
  • Click the type of layout you want to use for your Mega Menu (Figure 2.2).

Figure 2

  • The sections display. In this example, we have chosen a 3 column layout. Hover over a section and click the plus sign (Figure 3.1).
  • Click the type of component you want to add to the section of your Mega Menu (Figure 3.2).

Figure 3

  • Add the rest of your menu items (Figure 4.1).
  • When finished, click anywhere outside of the menu to exit the menu view (Figure 4.2).

Figure 4

  • Click Save to save the page and click Preview to view your Mega Menu in a browser (Figure 5).

Figure 5

  • Hover over the link that holds the Mega Menu (Figure 6.1).
  • The Mega Menu appears (Figure 6.2).

Figure 6