Colours in Nav bar below header displaying incorrectly

[FelicityM]

The colours in the navigation bar below header is displaying differently on different pages, and incorrectly on all pages.
http://moneysavingmeals.org/

In the Nav Bar on the homepage, everything displays with the correct colours, EXCEPT:
* Navigation Menu Items: Visited (set to FFFFFF, but displays as 000000)

On the "Appetisers & snacks" page, these display with the wrong colours:
* "Home" tab shows a black background with black text, instead of white background with black text
* "Soup" shows with a black background with black text, instead of white background with black text

On the "Soup" page, these display with the wrong colours:
* "Home" tab shows a black background with black text, instead of white background with black text
* "Appetisers & snacks" shows with a black background with black text, instead of white background with black text

Thanks for any help.

[Colin]

The first thing that comes to mind is that you don't have 'Custom Styles' selected in Suffusion Options > Skinning > Navigation Bar Below Header

[FelicityM]

It is already set to "Custom styles".

[drake]

Your menu is perfect... except the fact that the settings are incomplete...

The dark grey text on the black background is settled for "visited" state of items. When you come for the first time on the site you see black text over white background (that is the regular state of menus), but you test hardly your menus, so, for you, all menus who aren't "highlighted" are in "visited" state. On the Suffusion Options -> Skinning -> Navigation Bar Below Header set all states of menu items to be consistent.

[FelicityM]

It already *is* set to be consistent for Visited & Highlighted. Screenshots here:

http://moneysavingmeals.org/navbar/

(you can click them to enlarge)

[drake]

I see... I don't know, with inspect element I saw that there is still set the black background. Try to add at Suffusion Options -> Backend -> Custom Includes -> Custom Styles:

Code: Select all

#nav ul li a:visited, #nav ul ul li a:visited {background:#fff;}

[FelicityM]

Thanks, that fixed the problem with the black-on-black, but now the "Hover" colour is not showing correctly.

On the home page, when hovering over a menu item, they show white background/black text, instead of green background/black text.

On the "Soup" page, when hovering over a menu item, "Soup" shows correctly but "Appetisers & snacks" doesn't.

It's the opposite on the "Appetisers & snacks" page -- "Appetisers & snacks" shows correctly when hovering, but "Soup" doesn't.

[drake]

I don't know, for sure you have some plugin who interfere with the menus. In inspect element I see the menus settled correctly. Continue to add at Custom Styles:

Code: Select all

#nav ul li:hover, #nav ul li a:hover, #nav ul ul li:hover, #nav ul ul li a:hover {background:#e4f0ce;}

[FelicityM]

Thank you, that's fixed it.

I tried disabling the plug-ins (I only have two: Akismet and Google Site Verification), but the problem remains (unless the two lines of code are added).

But with the two lines of code, it all works, so thank you very much!

[drake]

Glad it help - we wait for recipes