Menu Text Color Issues

BB Theme
1

Hello!

Just started setting up my site, and I’m having an issue with the text colors in the header and footer menus.

Going through the customization menus, I’ve set the link color for both header and footer to be white, with a hover color of #f7db88. However, for some reason, the menu link text is displaying the hover color (even when not being hovered over). When I change the hover color, the menu link color changes accordingly. It’s only the menu link text which is having this issue–all other header and footer text is displaying the correct text, link, and hover colors.

Is there a way to resolve this issue?

P.S. The site is here. It’s basically barren because I literally just started building it, but you can see that the “Home” links, which are pulling from the main menu, are colored as #f7db88 when they should be white, whereas the other header links (“WSMC” and the search icon) are colored correctly, displaying #f7db88 only when hovered over.

2

Update: I just created the rest of my site pages and added them to the main menu. It appears that only the “Home” link is having this coloring issue.

3

Update #2: As I’ve been adding content to the site, I now realize that the menu is doing this according to which page I’m on. So, if I’m looking at the “About” page, then the “About” menu link appears with the hover color rather than the link color. If I’m looking at the “Home” page, then that’s the link affected, etc. I understand that this is likely so that a visitor to the site can tell at a glance which page they are on, but I do not want the link colors to appear in that way. Is there a way to change this?

4

Hi wsmc! Thanks for reaching out with your question.

You’re right, we also use the hover color to style the active page link. Sorry for the confusion. For the record, we thought adding another color choice for the active link would over complicate things.

Here’s a CSS snippet you can use to keep the active link white:

.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li.current-menu-item > a {
   color: #fff;
}

That’s for the header only, if you want to change the footer menu too, you can use this snippet:

.fl-page-footer .navbar-nav > li.current-menu-item > a,
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav > li.current-menu-item > a {
   color: #fff;
}

Hope that helps. Let me know if you have any other questions! :slight_smile:

5

Perfect! Thank you!