CSS issue with Current Page Item/Current Menu Item

  • Author
    Posts
  • #1167471

    karenjoslin
    Member

    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.

    #1167678

    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.

    #1167723

    karenjoslin
    Member

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

The topic ‘CSS issue with Current Page Item/Current Menu Item’ is closed to new replies.