WordPress.com

1. karenjoslin
   Member
   Feb 27, 2013, 7:46 PM

   I just switched to the Forever theme and tweaked the CSS. I changed my custom menu's nav bar so that my menu items won't have any buttons and the text is colored differently in normal state and on hover. Everything seemed to be working correctly in my final preview. However, when my blog went live, on my blog's home page the "Blog" menu item didn't recognize my CSS changes in its normal state (but it did on hover). This was the only page it appeared incorrectly on. The original code that seems to be controlling this item is:

   #access li.current_page_item a,
   #access li.current-menu-item a {
   background: #eee;
   color: #777;
   }

   However, replacing the background and the color with my own values didn't have any effect. There must be some other code overriding it, but I can't figure out what it is. For now, I've solved the problem by adding the !important tag. (Which meant that I then had to add it to the hover codes as well.) I've read that sometimes browsers don't recognize the !important tag, however. I'd like to get at the real root of the conflict and solve it there, if possible. Does anyone have any ideas as to what the real conflict may be and how I could solve it?

   Thanks!

   The blog I need help with is blog.karenjoslin.net.

2. designsimply
   Staff
   Feb 28, 2013, 7:59 PM

   One way I have for testing something like that:

   1. Temporarily remove everything from the Appearance → Custom Design → CSS editor
   2. Add the CSS example from your post
   3. Click the preview button

   If it works, add back each block of CSS from your custom CSS one block at a time and re-preview until you find which set of rules conflicts.

3. karenjoslin
   Member
   Mar 3, 2013, 8:53 PM

   Thanks for the tip! I'll try that on my private tester blog and see what happens.

Topic Closed

This topic has been closed to new replies.