beyond theme how to change header navigation text and icon colours

Topic summary

A user seeks help changing header navigation icon and text colors in the Beyond theme to match custom branding colors.

Initial Solutions Offered:

  • PageFly-Henry provides CSS code to be inserted in theme.liquid file before the closing tag, targeting navigation text elements with data-item="nav-text"
  • BSSCommerce-HDL offers an alternative CSS snippet for custom CSS section: svg.icon--root path { fill: #c1ab99 !important; }

User Requirements:

  • Wants to apply a specific custom color (#c1ab99 based on screenshot shared)
  • Initially uncertain about code placement location

Resolution:

  • The BSSCommerce solution successfully resolved the issue
  • User confirmed it worked and expressed gratitude
  • Screenshots were shared throughout to illustrate the desired outcome and results
Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.

Hi Henry, I would like this colour

Screenshot 2024-05-18 at 3.29.14 PM.png