Change background of icon on scroll

  • Resolved steffenweb

    (@steffenweb)


    10 months, 2 weeks ago

    Hey, I love working with your plugin. Worked out perfectly for many of my customers ??

    I now got an issue I don’t know how to solve. My customer wants his sticky header to be changed on scrolling. This perfectly works for the logo as its a function of your plugin.

    He also wants the background of his burger-menu-icon (color is white) changed to another color so it is visible on white background.

    Is there any way to do this using your plugin or using some css? ??

    Thanks in advance!

    • This topic was modified 10 months, 2 weeks ago by steffenweb.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Contributor Robert Wattner

    (@rwattner)

    Hi,

    Sorry for the delay. This should be no problem with a little bit of css. Do you have a link to the site? Is it using the elementor menu widget? Lmk and we’ll get the code you need.

    Thread Starter steffenweb

    (@steffenweb)

    No worries! You still answered fast ??

    Its dev.gmi.immo

    pw is: insolvent

    Plugin Contributor Robert Wattner

    (@rwattner)

    This CSS should do what you want. Just change red to whatever color you like.

    .she-header #Icon_feather-menu path {
	stroke: red;
}

    Also, you can remove the password from here if you don’t want it public. I think it might be against the forum rules as well even though it’s not a main account login.

    I hope this helps!

    Thread Starter steffenweb

    (@steffenweb)

    Thanks, this works! My description probably wasn’t very clear.
    I also want to change the background-color of that icon.
    Using background-color or fill doesnt work for that .svg class.
    Also tried removing “path”, which doesnt worker either.

    Do you have any idea on this? I can change the background-color on the icon itself via css, but then the background-color changes for the sticky-header without scrolling as well.

    Plugin Contributor Robert Wattner

    (@rwattner)

    Try this code out. Just change the blue color.

    .she-header .hfe-nav-menu-icon {
	background-color: blue !important;
	padding-right: 7.7px !important;
	margin-right: 36.3px;
}

    That button originally used all padding for the right side spacing. I had to fix the padding and add margin to make it look right. I hope this is what you wanted.

    Thread Starter steffenweb

    (@steffenweb)

    Worked perfectly, thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change background of icon on scroll’ is closed to new replies.