Change font color of Menu Items

Okay, my theme is mobile responsive, but I have a problem on tablets sometimes.

Because the font color of the menu items is white and the background is white, I've found that when I open the site using a tablet, and turn it landscape, the menu items disappear.

The menu is still there, it is just camouflaged white on white. I think my best option is to change the color of the menu items to another color. I have lighted the color of the header to a light shade of blue and I'd like to make the menu items a darker shade of blue.

Can you help me with the CSS code to make that happen?

Thanks!!

  • Adam Czajczyk

    Hello Eric,

    I hope you're well today and thank you for your question!

    I took a look at your site and tested it in responsive view (in various screen resolutions) but I wasn't able to replicate "white on white" issue. I'm also not sure color of which elements exactly would you like to change (e.g. menu text or background of highlighted element or both). I suppose I'm missing something here so could you please point me in a right direction?

    It would be great if you could provide me with a simple image (you may use any gfx editing app to create .jpg or .png image) showing how the menu should look like? It would help me a lot and I'm sure I could then provide you with a proper CSS code.

    Thanks!
    Adam

  • EricGiauque

    Hi Adam,

    This is kind of confusing, so my apologies in advance. What I really need is to understand how to change the font color of the top menu items.

    I've attached a screen shot that demonstrates the white on white issue I'm trying to resolve by changing the font color to a darker blue. I've had this problem before where the font size was so big that it was pushing the menu items down off the same line as the logo. I added two more menu items and it again pushed them off the blue heading line, and down onto the white space.

    However, so as not to confuse you further, I've also received good help from WPMUDev in the past to change the font size, which has generally been the solution to this problem. I've attached a second screen shot of the CSS code that changes the font size from 20 to 15 px. This brings all the items back up on the blue heading line, which is where they are at this moment.

    Now mind you, I've still been aggravated that I often can't see these changes immediately as I modify the pixel size, even after I clear my cache, or try to open in a new browser, or even in a private window. I KNOW I have updated the CSS code in my WP dashboard, and it just will not show a difference. Perhaps I just need to be patient, and eventually it does catch up, but that baffles me a bit that I can't see my modifications so I can test various font sizes.

    So, in sum, let's look at changing the font color and see if it works as an overall solution or if changing the font size is good enough for all platforms (desktop, notebook, tablet and smartphone)

    Thanks!!!

  • Adam Czajczyk

    Hello Eric,

    Thank you for your replay and this explanation.

    Let me start with the cache issue, if you don't mind. I don't know what hosting do you use but hosting providers often cache sites server-side as well. This is usually a "non-aggressive" caching, meaning that the "average Joe" (visitor) will not be affected by this in anyway except possibly a slightly better site performance but at the same time server resources will be used less.

    This however may affect your workflow as a site developer. Taking into account what you say about clearing cache (both site's and browser's) it's very likely that this is the issue here. The solution is to dynamically add version number to CSS and JS files. This should case any caching engine to treat these files as they were new and as a result push them to user's browsers each time the site's loaded.

    This plugin should help you with this. It's not been updated for over 2 years but should still be working fine. Give it a try please and let me know if it solved the problem:

    https://wordpress.org/plugins/css-cache-buster/

    As for font colors. Thanks to the screenshot I now see what the effect is. Assuming you'd like to change top menu's text color e.g. to dark blue (navy) you'll want to use this CSS code:

    #menu-main li a {color:#000066;}

    You may want to adjust the color itself by replacing "#000066" value with value of chosen color. Here's a handy tool for selecting colors:

    http://www.w3schools.com/tags/ref_colorpicker.asp

    I hope that helps!

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Eric!

    Have you also added the CSS code that I suggested (see below)?

    #menu-main li a {color:#000066;}

    I checked your site's front-end and it's CSS styles and cannot see it added anywhere. I'm not able to check this on your site though as it seems there's an error when I try to access it using the support access that you've granted.

    That said, could you please double-check that you've actually added an aforementioned CSS rule to your site? Also, it would be great if you could re-grant/extend support access as it usually fix an access error.

    Best regards,
    Adam

  • Adam Czajczyk

    Hey Eric,

    Thanks for granting access again!

    I took another look and fix that for you. Sometimes it's necessary to add an "!important" flag to some CSS rules. That's not a recommended way of using CSS but in some cases there's no easier way around. Here's current code in your "Appearance -> Custom CSS" box:

    #menu-main li a {color:#000066!important;}

    After I flushed site's cache the menu items changed color as expected (set to dark blue/"navy").

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Eric!

    This is definitely an issue of your browser's setting, it must be very persistent in keeping site in local cache instead of loading it on-demand. Could you please tell me what's the browser and what's the operating system that's causing troubles (please also specify version number for both)?

    As for posting question.

    If you post a question visiting the link below directly, it will go to the support forum:

    https://premium.wpmudev.org/forums/forum/support#question

    Alternatively, take a look at the menu bar of the page as shown on an attached screenshot. While you're on support forum, the last link on the right would be "Members". If you're on "Community/Members" area, the link would be instead "Support" (so in order to add question to support forum, click on it and then add your post).

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Eric!

    You could try going to Firefox options -> "Advanced" menu -> "Network" tab.

    In "Cached Web Content" section first click "Clear Now" in order to clear cache and then check the checkbox for "Override automatic cache management" option. You should then be able to set "Limit cache to" value to "0" or "1" MB.

    This may help here. I'm not using Mac so I'm not able to test it but surely it's worth giving a shot :slight_smile:

    Best regads,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.