Need help? Check out our Support site, then


CSS issue with Current Page Item/Current Menu Item

  1. 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. 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. 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.

About this Topic