Simple CSS Blockquote style showing in menu

  • Dear GP users
    I wanted alternative Blockquote styling on one page. So I inserted the following code in Tom’s Simple CSS at the bottom of the page:

    body.page-id-830 
blockquote.wp-block-quote {
    font-size: 17px; font-style: normal;
    color: #ffffff; background-color: #cccccc;
    border-left: 7px solid #990000;
}

    So that worked. But the funny thing is that now when I hover over the current menu, it displays like the new blockquote. And because the new blockquote is a bigger font, the menu item oscillates crazily between big font and little font.
    Can anyone explain why this is happening, pls, and suggest a solution?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Leo

    (@leohsiang)

    Hi there,

    That CS by itself should not change anything about the menu at all.

    This is the CSS that’s causing the issue:
    https://www.screencast.com/t/3D4DRgit1o

    Thread Starter mnatseah624

    (@mnatseah624)

    Dear @leohsiang
    Thanks. I can see the issue is that the comma at the end of
    body.page-id-830 .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a,
    and just before the blockquote code caused the confusion.
    I’ve replaced it with an empty pair of curly brackets, like this
    body.page-id-830 .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {}
    Now it works. Was that the correct solution? Or…?

    • This reply was modified 4 years, 7 months ago by mnatseah624.
    Leo

    (@leohsiang)

    Yup looks like just a syntax error ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Simple CSS Blockquote style showing in menu’ is closed to new replies.