How to add white outlining/shadows to navigation menu text

Topic summary

Navigation text was hard to read over a dark auto‑playing video; switching to white text would break readability on pages with white backgrounds. The goal was to improve contrast without changing text color across the site.

Proposed fix: add a translucent white background to the header, so the black navigation remains legible regardless of page background. Additionally, adjust the logo wrapper’s height and alignment for consistent layout.

Implementation (Shopify theme):

  • Online store > Theme > Edit code.
  • In Assets > index.css, add a rule to set the header background to semi‑transparent white.
  • In Assets > base.css, add a rule to set the logo wrapper height to 100px and center its contents.

Result: The change improved visibility of the navigation over the video (an image was shared showing the outcome). The original poster confirmed the solution worked.

Status: Resolved; no further action requested. Technical note: CSS (cascading style sheets) rules were edited to control background and layout.

Summarized with AI on January 23. AI used: gpt-5.

My navigation menu is currently black and it is hard to see because I have an autovideo playing behind it. The video is quite dark and so the black text isn’t visible. I know swapping to white text would fix the issue but on my other pages the background is white so the text wouldn’t show up on the other pages. I’ve attached a photo

Website: recreation-station.com

password is admin

Hello,

What do you think about this solution?

Online store > theme > Edit code.

Assets > index.css

Copy and paste at the bottom of the file.

.header-wrapper .header {
  background: #ffffff45;
}

Assets > base.css

Copy and paste at the bottom of the file.

.header__heading-logo-wrapper {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Result:

Hope this helps,

1 Like

Beautiful, thank you

You are welcome!

1 Like