UCF University Header

Installation

Paste this immediately after your opening <body> tag. Nothing else is required — no stylesheet, no markup, no configuration.

<script id="ucfhb-script" src="//universityheader.ucf.edu/bar/js/university-header.js"></script>

The bar inserts itself as the first element in the body. If you need it somewhere specific instead, put an empty <div id="ucfhb"></div> where you want it and the script will use that.

Already embedded?

Then you have nothing to do. v4 is served from the same URL as v3, so every site that already has the snippet gets the new bar automatically.

Options

Flags are passed as query parameters on the script's src. They require the tag to keep its id="ucfhb-script".

Option	Effect
`use-1200-breakpoint`	Widens the bar's container to 1140px on screens 1200px and up, to line up with a wider grid.
`use-full-width`	Runs the bar edge to edge with a 15px gutter, for full-width layouts. Includes the wider breakpoint, so the two never need combining.
`use-bootstrap-overrides`	Retained but inert. Bootstrap 2.x support was dropped in 4.0.0. The flag is still accepted so existing embeds keep working; it no longer does anything.

<script id="ucfhb-script" src="//universityheader.ucf.edu/bar/js/university-header.js?use-full-width=1"></script>

Preview them on this page

Default Wide breakpoint Full width

What changed in 4.0.0

This is a full rebuild. Visually it is the new university brand: the stacked UCF mark, a taller bar, inline SVG icons, a pop-out search, and a single MyUCF button in place of the old sign-in tray.

Underneath, the bar now renders inside a shadow root. That is the change most likely to affect you, and it cuts both ways: your site's CSS can no longer accidentally break the header, and it can no longer deliberately restyle it either.

If you were overriding header styles

CSS rules targeting the bar's internals — #ucfhb-search-field, #ucfhb-signon, and the rest — no longer apply, and the same goes for JavaScript that reaches in with document.querySelector. Use the theming API below instead, or pin to v3 while you migrate.

Also worth knowing

The bar is 72px tall on desktop and 60px on narrow screens, up from 50px. Your content sits 22px lower than it used to.
There is no mobile menu toggle any more. With only search and MyUCF to show, everything fits on one row at every width.
The header is now a single file. It no longer requests bar/css/bar.css — the styles are inlined. The old CSS files are still served this release and will be removed in 4.1.0.
university-header-full.js is gone. A source map is published next to the minified file instead.

Theming

Custom properties cross the shadow boundary, so setting them on #ucfhb from your own stylesheet works by design. This is the supported way to adjust the bar.

#ucfhb {
  --ucfhb-bg: #1a1a1a;
  --ucfhb-accent: #7ab8ff;
}

Property	Default
`--ucfhb-height`	`72px`	Bar height (60px under 768px)
`--ucfhb-bg`	`#000`	Bar background
`--ucfhb-fg`	`#fff`	Text and icons
`--ucfhb-accent`	`#edb80c`	Gold — the rule, the MyUCF button, hover states
`--ucfhb-rule`	`#3a3a3a`	The search field's border
`--ucfhb-font`	system stack	Typeface for the bar's text
`--ucfhb-z`	`10000`	Stacking order

The logo's colours follow the bar automatically. The mark is a knockout lockup, so its interior takes --ucfhb-bg — re-theme the background and the logo stays correct without further work.

Styling parts directly

For anything the custom properties do not reach, four elements are exposed via ::part().

#ucfhb::part(myucf) { text-transform: none; }

Available parts: bar, logo, search, myucf.

Accessibility

The bar is a labelled complementary landmark, deliberately not a second banner competing with your page's own.
Search opens by click or keyboard, Escape closes it, and focus returns to the trigger.
Focus indicators use a double ring that stays visible against the black bar, white text, and the gold button alike.
All transitions are disabled under prefers-reduced-motion.
The link home carries real text — "University of Central Florida" — at every width, including where it is visually hidden.

The bar is tested against WCAG 2.2 AA with axe on every build, across Chromium, Firefox, and WebKit.

Rolling back to v3

If v4 breaks something on your site and you need time, v3 stays available at a permanent URL. Change the one line:

<script id="ucfhb-script" src="//universityheader.ucf.edu/bar/js/university-header-v3.js"></script>

This is a stopgap, not a supported long-term configuration — v3 will not receive further updates. Please open an issue so the problem can be fixed in v4.