Official websites use .mil
Secure .mil websites use HTTPS
DOD2 Header Replacement Banner + Hero
v1.3.3
This version supports unified, split, and header-only layouts, separate hero media controls, current-page nav detection, centered custom hero image behavior, configurable shrink/fill handling, and clean hiding for empty hero text.
Use unified to keep header and hero on one shared background. Use split to give hero its own region below the header. Use header-only to disable the hero region entirely.
Top header-region height when using split mode.
Mobile top header-region height when using split mode.
Used as the shared image in unified mode, or the header image in split mode.
Used only in split mode for the hero region background image.
Full portal image path or image URL for the seal or logo.
Maximum rendered size for the seal.
Spacing between the seal edge and both underline segments.
Negative lowers the line. Positive raises it.
Responsive font size for nav links and the mobile menu button.
Left and right padding inside each nav button.
Default nav text color, including optional transparency.
Active page underline color, including transparency support.
Thickness of the current-page underline.
Smaller line of text shown above the main hero title. Leave blank to hide it.
Primary hero headline displayed in the center of the banner. Leave blank to hide it.
Use auto to show the bar only when hero text exists. Use true to always show it. Use false to always hide it.
500px
Desktop minimum height for the hero region in split mode, or the full shared area in unified mode.
Mobile minimum height for the hero region in split mode, or the full shared area in unified mode.
Overlay tint placed over the hero image for contrast.
Color for the main hero title text.
Color for the hero subtitle text.
Responsive font size for the main hero title.
Responsive font size for the hero subtitle.
Accent color for the subtitle styling and hero underline bar.
Width of the hero underline bar below the title.
Thickness of the hero underline bar below the title.
custom
Use cover for full bleed, contain for full image visibility, or custom for manual shrink sizing.
50%
Used only when Hero Image Fit is custom. Example: 70%, 80%, 90%, 100%.
Color shown in the unused space around a contained or custom-sized hero image.
Use one bullet per line in this format: Nav Label | /link-url
Maine National Guard