Lux Library header should display the | in a small screen

[christinach]

Current display

In large screens we display a | between the Princeton Library Logo and the Brand name In small screens we don't display a | between the Princeton Library Logo and the brand name

Desired display

We want to display the | in both large and small screens

Acceptance criteria

• [ ] In small screens there is a | between the Princeton Library Logo and the brand name
• [ ] I can successfully use this feature with Voice Over in Safari.
• [ ] I have checked this feature using one of the following browser extensions and confirmed that it does not add any level A or level AA issues:
  • axe dev tools
  • Lighthouse
  • Wave
• [ ] ...

Notes