A Symmetry theme user is experiencing navigation visibility issues due to a black header making menu links invisible on certain pages.
Problem:
Solutions Provided:
Multiple community members offered CSS fixes:
.navigation__link elements within #main-navOutcome:
The initial fix successfully resolved the navigation visibility issue. However, when the user requested to also change the header color on the main page during scrolling, one responder advised keeping it black to avoid visual inconsistency.
Note: The conversation includes code snippets and screenshot references that are central to implementing the solution.
Hi,
My website is using Symmetry theme.
I have an issue right now. My header is black color right now after going into all the menu pages. But I don’t know what going on this issue. The navigation is invisible. I would like to get some help. Also, how can I change the main page header color (black) when I am scrolling down? Thanks a lot.
Here is my website:https://phantomgogo.com/
@Kathy518 - please add this css to the very end of your styles.css file and check, it should solve this
#main-nav .navigation .navigation__link,
#main-nav .navigation .navigation__link:hover {color: #000!important;}
.template-index #main-nav .navigation .navigation__link,
.template-index #main-nav .navigation .navigation__link:hover {color: #fff!important;}
Hello @Kathy518
I would like to give you the recommendation to support you so kindly follow steps below:
I hope the above is useful to you.
Best regards,
GemPages Support Team
Step1: Go to online store → Edit code
Step2: Search base.styles file
Step3: Paste below code bottom of the css file → save
.navigation .navigation__tier-1 > .navigation__item > .navigation__link {
color: #000 !important;
}
Hi,
Thanks a lot. It works. If I want to make the main page when I am scrolling down, the header become black color too. How should I do? thanks
@Kathy518 - better to keep black only else it will look weird
