Header Design Concepts
Five header directions for review, each a different layout and colour theme. No solar-panel photo in any of them, backgrounds are flat colour or gradient only. None of these are wired into the live site yet.
1. Clean Light (current-style baseline, no photo)
Solar Compare Hub2. Dark Navy
3. Warm Gradient (amber to orange)
3B. Warm Gradient (reversed diagonal, pill nav links)
3C. Warm Gradient (solid amber, navy border accent)
3D. Warm Gradient (radial spotlight)
3E. Warm Gradient (navy accent stripe)
4. Minimal Mono
5. Two-Tone Teal / Navy
6. Centered Logo, Split Nav (links either side instead of one group)
7. Forest Green Solid (new colour, ties to the carbon-footprint messaging)
8. Frosted Glass, over a photo backdrop (blurred, semi-transparent nav bar)
8B. Frosted Glass, golden-hour photo, navy-tinted glass, white text, amber CTA
8C. Frosted Glass, battery photo, green-tinted glass, white text
8D. Frosted Glass, close-up roof photo, near-black tinted glass, amber links, white CTA
8E. Frosted Glass, EV charger/brick photo, light cream-tinted glass, navy text, orange CTA
8F. Same colours as 8B, no photo: solid muted slate-blue, white text, amber CTA
8G. Same colours as 8D, no photo: solid near-black, amber links, white CTA
8H. 8G reworked in blue: solid deep navy
8I. 8G reworked in blue: solid steel/mid blue
8J. 8G reworked in blue: solid vivid/bright blue
8K. 8G reworked in blue: diagonal gradient, navy to bright blue
8L. 8G reworked in blue: reversed diagonal gradient, sky blue to navy
8M. 8G reworked in blue: radial blue spotlight gradient
9. Two-Row: thin trust-strip above the main nav
Free, no-obligation quotes • MCS-certified installers only
10. Floating Pill Nav (rounded, not full-width, shadow lift off the page)
Let me know which direction to carry into templates/partials/header.html, or mix elements from more than one.