A New Dawn Sticky Header & Dynamic Logo Resize

Two related header UX issues identified during the ^[1] site build, both assigned to a developer for resolution.

Issues

1. Sticky Header Disappears on Slanted Section Dividers

The main navigation bar vanishes when scrolling past sections that use slanted/tilted dividers (a Webflow/builder "section divider" style). The nav reappears once the user scrolls past those sections. Removing the slanted dividers restores the sticky behavior, confirming the divider styling is the root cause.

Impact: Users lose access to navigation mid-page, degrading UX and potentially hurting engagement on pages that use the decorative divider style.

Fix: Developer to investigate the z-index or CSS stacking context conflict between the slanted section divider element and the sticky nav container.

2. Header Logo Too Large on Scroll

The header occupies significant vertical space due to logo size. As users scroll down, the oversized header obscures page content.

Fix: Implement a dynamic logo resize on scroll — the logo renders at full size at the top of the page, then shrinks to a compact size once the user begins scrolling. This keeps the nav persistent without blocking content.

A working example of this pattern is live on the Bluepoint ATM site, where the logo transitions smoothly on scroll and the nav bar maintains a solid background color (preventing transparency issues over body copy).

Resolution Plan

• Owner: Melissa to assign to a developer
• Scope: Both fixes are considered in-scope for the current engagement
• Reference site: bluepointatm.com — demonstrates the dynamic logo resize behavior

Related

• ^[2]
• ^[3]