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):
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.
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,
Beautiful, thank you
You are welcome!
