- This topic has 8 replies, 2 voices, and was last updated 5 years, 5 months ago by
.
Dear Shufflehound,
The last time I worked on my web page was a year ago and thought I write down stuffs than I have changed on the CSS file or thought some theme setting menu, but I just can’t figure out how to fix the color of the top menu.
Please see the attached picture, the top part is our home page, which has a menu in white text and transparent background which is quite ok, but when I need to add a very simple faq page that has no background. the white menu text is mixed with the white background.
Can you tell me by what CSS or theme setting can I use to fix this top menu text color (and hover color) and set it to gray or black? (for the whole site).
Thank so much.
Elton
Some additional info. I did search through other users question related to my issue. But the one that is having the same problem as mine doesn’t help. The Navigation color doesn’t match with the actual apparent on the home page which is white. So I guess some other setting is overriding this setting.
Elton
Hi Elton,
I hope you are well today and thank you for your question.
From your second shared screenshot it seems you have changed the navigation color correctly in the theme settings.
This can be child theme issue used on your site so to confirm it just temporary use the Jevelin theme on your site. If everything works fine then it’s your site theme issue.
Best regards,
Shufflehound teamYes, we have a child theme but the child theme has very little change and definitely not touch the styling of the top menu that we are dealing with.
Actually I am able to use the inspector to trace back to the root of the issue (partly), line 3297 of the stylus.css:
.primary-mobile-light #header-logo-title,
.primary-desktop-light .sh-header-top-4 #header-logo-title,
.primary-desktop-light .sh-header:not(.sh-sticky-header-active) #header-logo-title,
.primary-desktop-light .sh-header:not(.sh-sticky-header-active):not(.sh-header-10) .sh-nav > li > a,
.primary-desktop-light .sh-header:not(.sh-sticky-header-active):not(.sh-header-10) .sh-nav > li.menu-item > a > i {
color: rgba(255,255,255,0.85)!important;
}By alternating this I am able to change the color of the text on the menu but it changes back to when the mouse is hover on the text. So changing the above rule is just a hard fix that fixed half of the issue.
Also before I write to you, we have just updated the theme to the latest 4.9.8. All the files are newly downloaded, so I don’t understand why it is my site theme issue. In the Private information field below, is the additional CSS that I added in through the Theme setting and that reminded after the theme was updated. But you can see none of them is related to menu.
I have included detail in about my site, please kindly get in an take a look. This is very strange.
Regards,
Elton
I could confirm the issue on my test site which only occurs when you set primary header to light therefore notified the theme developer about this so that it will be fixed.
The issue will be fixed ASAP.
In the meanwhile you can try resolving the issue by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-header-search-close i, .sh-header .sh-nav > li.menu-item > a, .sh-header #header-logo-title, .sh-header .sh-nav > li.menu-item > a > i, .sh-header-mobile-navigation li.menu-item > a > i, .sh-header-left-side li.menu-item > a, .sh-header-left-2 .sh-side-button-search, .sh-header-left-2 .sh-side-button-cart, .sh-header-left-2 .sh-side-button-cart .sh-nav-cart i, .sh-header-left-2 .sh-nav li.menu-item > a.fa:before { color: rgba(43,43,43,0.69) !important; } .sh-header .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a, .sh-header .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a > i, .sh-header .sh-nav > li.sh-nav-social > a:hover > i, .sh-header-mobile-navigation li > a:hover > i, .sh-header-left-side li.menu-item > a:hover { color: #000000 !important; }Unfortunately, I tested the code you proposed but they didn’t change the color of the menu. Everything stay the same.
It seems not working on your site because of CSS specifcity issue so please try using below custom CSS code instead of above shared.
#page-container .sh-header-search-close i, #page-container .sh-header .sh-nav > li.menu-item > a, #page-container .sh-header #header-logo-title, #page-container .sh-header .sh-nav > li.menu-item > a > i, #page-container .sh-header-mobile-navigation li.menu-item > a > i, #page-container .sh-header-left-side li.menu-item > a, #page-container .sh-header-left-2 .sh-side-button-search, #page-container .sh-header-left-2 .sh-side-button-cart, #page-container .sh-header-left-2 .sh-side-button-cart .sh-nav-cart i, #page-container .sh-header-left-2 .sh-nav li.menu-item > a.fa:before { color: rgba(43,43,43,0.69) !important; } #page-container .sh-header .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a, #page-container .sh-header .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a > i, #page-container .sh-header .sh-nav > li.sh-nav-social > a:hover > i, #page-container .sh-header-mobile-navigation li > a:hover > i, #page-container .sh-header-left-side li.menu-item > a:hover { color: #000000 !important; }The last reply solution works. Thanks.
Looking forward to see the new version and have the bug fixed.
You are most welcome here 🙂
