additional CSS color change also changes shape…

  • Resolved gerritroorda

    (@gerritroorda)


    1 year ago

    Running Miniva theme I wrote additional CSS to make the ‘DONEREN’ menu-item appear always as on ‘hover’:

    I gave the menu-item CSS Classes: ‘highlighted-menu’

    I wrote additional CSS:

    .highlighted-menu {
    color: #fff;
    background-color: #ce405a;
    }

    Now the text color does not change, the background color does, but the shape of the button changes: instead of narrow and rounded, like all the menu-items on ‘hover’, the button becomes big and rectangular. Somehow the shape-settings are changed by my color-settings?

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

Viewing 4 replies - 1 through 4 (of 4 total)

  • Somehow the shape-settings are changed by my color-settings?

    Under the hood, the shape isn’t being changed by your custom CSS code. Rather, your code isn’t affecting the existing oval-shaped background at all: you’re creating a new one over the existing one.

    The oval-shape (CSS: border-radius) background is on the anchor (link) text. But your custom class is on the parent list item, and your CSS code is not targeting the link. So a new background color is created.

    To replicate the oval-shaped background and make the text white, use the following custom CSS code instead.

    li.highlighted-menu > a {
    color: #fff;
    background-color: #ce405a;
}

    Standing by for feedback.

    Thread Starter gerritroorda

    (@gerritroorda)

    Thank you George, for your reply! Works like a charm!

    I’m glad it worked for you.

    If you have a second to spare, kindly mark your post as RESOLVED.

    Thank you!

    Thread Starter gerritroorda

    (@gerritroorda)

    thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘additional CSS color change also changes shape…’ is closed to new replies.