The header for the purposes of QA is from the top of the page to the bottom of the main nav items and will generally contain the logo, top nav, main nav, translate, important notice, and search.

Example:

Top Nav

We do not put an actual limit on the number of items you can have in the top nav, even if the PM puts one in the project profile, due to impossible questions about word length/character length and spacing.

Test:

• Adding a link
• Removing a link
• Editing a link
• That the links work
• If the PM requests a limit make sure that many reasonable words fit and look good (this can be very subjective)

Search

We have a surprising variety in how searches can be implemented, which means this does need special attention, also making sure it is connected to the correct search capabilities.

Test:

• Does it search the correct things?
  • Do they have a Laserfiche or Granicus extra search?
• Is it using the correct search engine (Google CSE or visionSearch)
  • We do have a couple clients using alternate searches, please be on the lookout for them
• Is there a popup/dropdown?

Main Nav

This is primarily a spellcheck/design check. The main menu will be handled separately.

Look For:

• Spacing
• Styling
• Spelling
• Are they buttons (Calistoga) or more text like (Lake Elsinore)? If buttons:
  
  • Are the various hover states the same on both sides?
  • Is the spacing between buttons even?
  • Is the text centered in the button?
  • Are there dividers? Are they even?
  • We've mostly moved away from these, but they can come up

Logo

This is generally quick.

Look For:

• Alignment
• Size
• Image Quality
• Make sure the main nav div doesn't run over the logo making it un-clickable in parts

Important Notice

We used to have two different kinds, a popup over the collage, and a bar at the top of the site. We now only really use the bar at the top.

Test:

• Color
• Font
• Collapsing functionality
• Display/Not Display
• At various screensizes, ensure the tab when it's collapsed doesn't overlap any other header elements

Translate

We have two main ways to implement this, either as a link or as a drop down list.

Link:

• Spelling
• Links to the correct page
• Won't actually load the page, due to proxy servers and front end protection on dev sites

Dropdown:

• Spelling
• Language Options (if specified by the PM)
• Dropdown style
• This can be tested, please check Spanish and make sure the site looks decent (not good, decent, expect things to not quite look right)

Sticky Headers

As a note some of our sites have what we call "Sticky Headers" which means that as you scroll down the page, a reduced version of the header becomes fixed at the top of the screen with content scrolling under it. Generally the reduced header has a logo, the main nav and the search. Their should be a separate comp for this the title will likely include -sticky or something like that.

Check with the PM/comps to see if there should be a difference between the behavior of the sticky header on the homepage vs interior pages.