Stable desktop baseline
The widest desktop state showed the intended hierarchy clearly: aligned branding, full navigation, and a workable storefront header structure that could guide the breakpoint decisions.
Mobile Optimization
ASU Print Site Navigation Fix
Resolving a branded storefront header conflict.
The ASU Print Online storefront had to remain faithful to Arizona State University's official visual standards while also functioning inside a web-to-print platform with its own header structure. The main issue came from ASU's global navigation being injected through external JavaScript, which then collided with the storefront header and broke the layout across multiple viewport widths.
Constraints.
ASU maroon, gold, official wordmarks, and hierarchy rules all had to remain intact. The fix had to solve layout failures without making the storefront feel off-brand.
Key failure point
The real collision appeared at mid-width, where the injected utility navigation and storefront header started competing for the same space and breaking the brand presentation.
Auditing the stable desktop state first
Before fixing breakpoints, I needed to understand what the correct branded structure should look like. The wide desktop state became the baseline for preserving hierarchy, spacing, and ASU's official treatment.
Identifying the collision point at mid-width
The real failure happened when the injected utility nav began competing with the storefront's own header. That is where logo overlap, clipped controls, and spacing breakdowns became obvious and actionable.
Documenting the mobile issues before changing anything
On smaller screens, the storefront needed better collapse behavior and a more reliable category layout. Capturing the broken state first helped define exactly what needed to improve without losing brand fidelity.
Confirming the fix across the full page system
The final pass was making sure the solution held together in context, not just in isolated screenshots. The result was a storefront with stable branding, stable navigation, and more usable category browsing across tested breakpoints.
