@vmckellar - add this css too
@media screen and (min-width: 990px){
.header {padding: 0 !important;}
}
Topic summary
Goal: Change the navigation bar’s background to #FF79A4 and menu text to white in the Shopify Colorblock theme, while keeping the rest of the header white.
Layout constraint: The header uses a grid, so the menu wasn’t full-width initially. CSS adjustments were required to create a full-width horizontal strip.
Key CSS changes (added to base.css):
- .header__inline-menu: background-color #FF79A4; width 100%; text-align center; plus padding tweaks on .header__search and .header__icons.
- To make the strip span edge-to-edge: @media (min-width: 990px) .header { padding: 0 !important; } and .header { max-width: 100%; }.
Text and icon color updates:
- Set main menu text and carets to white: .header__menu-item span { color: #fff; } and .header__menu-item .icon-caret path { fill: #fff; }.
- Addressed readability in dropdowns (white background): restored submenu text to black with .header__submenu .header__menu-item span { color: #000; } and submenu carets to black with .header__submenu .icon-caret path { fill: #000; }.
Outcome: Full-width pink nav strip achieved; main menu text white; dropdowns readable with black text and carets. Screenshots were used to verify alignment and visibility. Status: Resolved.