Reply To: Header color change on scroll.

Hi,

1. Please replace the following custom code provided in previous replies (#555871, #556050) with this one. The code is commented so you can remove or modify a desired part of it:

/* STICKY HEADER NAVIGATION & CHEVRON COLORS */

.whb-sticked  :is(.color-scheme-light,.whb-color-light) .wd-nav[class*="wd-style-"] {
    --nav-color: #001c55;
    --nav-color-hover: #001c55;
    --nav-color-active: #001c55;
    --nav-chevron-color: #001c55;
}

/* STICKY HEADER ACTION BUTTONS */

.whb-sticked .whb-color-light .wd-tools-element.wd-design-6>a>:is(.wd-tools-inner,.wd-tools-icon) {
	border-color: #001c55;
	color: #001c55;
}

/* STICKY BORDER BETWEEN MENU ITEMS */

.whb-sticked :is(.color-scheme-light,.whb-color-light) .wd-nav:is(.wd-style-bordered,.wd-style-separated)>li:not(:last-child):after {
	border-color: rgba(51, 51, 51, 10%);
}

2,3,4. If an SVG image is served via IMG tag (screenshot https://prnt.sc/1qU6bRK4-Sxv), which is done in WordPress by default, its content can’t be accessed for CSS customization. In that case, there is no difference between vector (SVG) and raster (JPG, PNG) images.

Using one CSS it is impossible to set the color of the regular image, but as an alternative solution, you can invert the menu item icon color with the following custom code. It is important to note that this method is suitable only for monochrome images, since the color can only be inverted. For example, white will turn black, and black will turn white.

/* STICKY MENU ITEM ICONS */

.whb-sticked :is(.color-scheme-light,.whb-color-light) .wd-nav-img {
	filter: invert(1);
}

The previous solution will not suit your logo image since it is multicolor, but to change your logo in the sticky header you can use the header builder logo element option “Logo image for sticky header” (https://prnt.sc/SHirBM-E7uNo) to set a separate logo for the sticky header which you need to prepare in advance in the image editor and upload to the site.

Kind Regards