Can’t get the colors to work

  • Resolved josflachs

    (@josflachs)


    9 months, 2 weeks ago

    Hi Robert, I’m afraid I need your expertise. I want a transparant header that changes to white on scroll. No problem there. I followed the instruction you gave in Change Text-color when scroll. But it ain’t working as I think it should.

    Here is the CSS I created:
    /* LINK COLOR */
    .she-header .elementor-nav-menu a {
    color: #fff !important;
    }
    /* LINK HOVER COLOR */
    .she-header .elementor-nav-menu a:hover {
    color: #C17C31 !important;
    }
    /* LINK ACTIVE COLOR */
    .she-header .elementor-nav-menu a:active {
    color: #C17C310 !important;
    }
    /* DROPDOWN MENU BACKGROUND COLOR */
    .she-header .elementor-nav-menu–dropdown {
    background-color: #C17C31 !important
    }

    .she-header-yes .elementor-heading-title {
    transition: all 0.4s ease-in-out;
    }
    .she-header .elementor-heading-title {
    color: #C17C310 !important;
    }

    I have another problems. The caret doesn’t change color at all. It remains black.

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Robert Wattner

    (@rwattner)

    Hi,

    You said it’s not working how you think it should. What isn’t working besides the submenu arrow? What exactly are you trying to achieve? I would assume that the menu text would start white, then change to brown when given the white background?

    To also change the submenu arrow color you just need to add a fill. Like this…

    /* LINK COLOR */
.she-header .elementor-nav-menu a {
color: #fff !important;
fill: red !important;
}
    Thread Starter josflachs

    (@josflachs)

    My bad! I made an oopsie …

    Instead of placing the custom CSS in the menu, where it belongs, I placed it on the container. I just discovered that silly mistake. Once rectified, it works as it is supposed to.

    My sincere apologies for that.

    Thread Starter josflachs

    (@josflachs)

    Still got one problem: the active state has the wrong color. I can’t get it right:

    /* LINK COLOR */
    .she-header .elementor-nav-menu a {
    color: #95632D !important;
    fill: #95632D !important;
    }

    (The fill I added for the carets)

    /* LINK ACTIVE COLOR */
    .she-header .elementor-nav-menu a:active {
    color: #ffffff !important;
    }

    This should do the trick, but it doesn’t.

    • This reply was modified 9 months, 1 week ago by josflachs.
    Plugin Contributor Robert Wattner

    (@rwattner)

    Try this code instead

    /* LINK ACTIVE COLOR */
.she-header .elementor-nav-menu a.elementor-item-active {
color: #ffffff !important;
}
    Thread Starter josflachs

    (@josflachs)

    Thanks, that works!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Can’t get the colors to work’ is closed to new replies.