Header color change on scroll.

Hello there,

When i scroll my header, its goes from transparant to a color, but i would like to know how to change my header content into a specific content, this consits of icons and text(menu).

How do i change this?

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .whb-sticked .whb-general-header, .whb-sticky-shadow.whb-sticked .whb-row:last-child {
    background: orange !important;
}

Change the color as per your requirements.

Best Regards.

Thank you for your response. This changed the header color itself, but i asked for the content of the header, this being icons, text(menus), logo.

Hello,

You can go to Dashboard > Theme Settings > Typography > Advanced > there you can create a new Rule by clicking on + Add Rule > then select Main navigation links from the dropdown > then you can define the menu color. And for the logo you need to upload the logo in another color.
https://ibb.co/sCPgnkD

For the Header icons please share the page url so i will check and give you a possible solution.

Best Regards.

Alright. I hoped for an easy solution for everything to easily change when you scroll.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.home .whb-sticked .whb-general-header .wd-nav.wd-nav-main > li > a, .home .whb-sticked .whb-general-header .wd-tools-icon:before {
color: black;
}

Best Regards.

[kasper]

Thank you for your response. This helped with the text and two of the icons, but not with their frame for some reason.

Now, how can i change the rest of the icons to black, including the logo changing?

Also, the change only works on the homepage. How can i change it for all?

• This reply was modified 3 weeks, 1 day ago by kasper.
• This reply was modified 3 weeks, 1 day ago by kasper.

Hello,

Please remove your code and add the following Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.whb-sticked .whb-general-header .wd-nav.wd-nav-main > li > a, .home .whb-sticked .whb-general-header .wd-tools-icon:before {
color: black;
}

.whb-sticked .wd-tools-element.wd-design-6>a>:is(.wd-tools-inner,.wd-tools-icon) {
  border: 1px solid black !important;
}

For the logo image and for the icon it is not possible with custom css code. You need to upload the image in another color.

Best Regards.

1. The new code made the text black and the outrim of the icon, but removed the black color of the Woodmart icons. Please see the screenshot.

2. My icons are SVGs – Are you sure that CSS code are not able to change this?

3. What if my logo is an SVG. Will you be able to make a code for it?

4. I will upload the logo in a different color – Please provide me with the code for the global ccs of how to change it.

Attachments:

You must be logged in to view attached files.

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

Thank you very much for the response, Bogdan. I appreciate it.

I believe your solutions worked well. I am still curious if there isn’t a CSS solution for the icons. What if they were wd-tools-icons?

If by “wd-tools-icons” you mean font icon – yes. In that case, your menu item icons will change color alongside the menu item text. For these purposes, you need to use FontAwesome icon font that contains all necessary icons, but with the current Elementor version, you need to disable some Elementor options enabled by default since from version 3.18.0 FontAwesome icon font is deprecated. As we know, FontAwesome icon font was deprecated because of site performance issues.

If you want to try it, you need:
1. Navigate to Elementor -> Features -> Inline Font Icons, set “Inactive” and save changes https://prnt.sc/vL4u-XySPk22
2. Navigate to Theme settings -> Performance -> Fonts & Icons -> Font Awesome Library and set “Always use” https://prnt.sc/KtC2U8ukS8GJ
3. Navigate to the FontAwesome 5 icons page https://fontawesome.com/v5/search?o=r&m=free, choose desired icon and copy it code https://prnt.sc/skyw-5UEx7ln
4. Paste the following code inside WordPress menu option called “Icon name (from FontAwesome 5 set)” like shown on screenshot https://prnt.sc/9qvD1_9zEZpe.

Please pay attention. For example, if the icon code is “far fa-envelope” you need to change it to “envelope far” before pasting it inside “Icon name (from FontAwesome 5 set)” field.

Kind Regards

[kasper]

How about if i want to use the icon font provided by Woodmart in woodmart settings?

Other than that, two of the current icons I’m using is from a demo of woodmart. Perhaps you know the correct names for them? https://woodmart.xtemos.com/kids/ in the top left corner.

• This reply was modified 3 weeks ago by kasper.

1. WoodMart font is a utility font that is used only in theme interface such as header elements, mobile bottom nav bar, single product action buttons, etc. It can’t be directly used in site menus via options, such as FontAwesome icon font, and also it doesn’t have the wide variety of icons. If you want to use WoodMart icon font in your main menu, navigate to the Theme settings => Typography => Icon fonts (https://prnt.sc/BfJ__hMEWwyA), choose which icon you want to use in which menu item, and we provide you with custom CSS code for it.

2. These icons are image files called “w-bcs-white-about-us.svg” and “w-bcs-white-contact-us.svg”.

Kind Regards

Thank you for your response. Is there anyway to use a CSS code to change the color of these icons files mention in the second part? Like for the way i want to use them in the menu with a color change on scroll?

As I mentioned in previous reply (#556237), color of SVG icons served via IMG tag cannot be set via CSS. Using CSS, It can be only inverted using filter: invert(1) property. An example of that code is located in the same reply (#556237).

/* STICKY MENU ITEM ICONS */

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

Kind Regards

Thank you for the example. I see the effect and its not too bad.

To understand what you were saying earlier. Would i be able to change the color on icons during scroll, if i used some of the interface icons from the theme?

Yes, because they are part of the icon font, not regular image files. Choose which icon from this list (https://prnt.sc/BfJ__hMEWwyA) you want to use in which menu item, and we will provide you with a custom CSS code for them.

Kind Regards

Thank you. That is most kind of you. I’m just trying to figure out the icons, as i need one for the ‘Shop’, one for the ‘About us’ and for the ‘Contact us’ its rather easy with just a mail icon.

Do you have any suggentions?

First, remove regular SVG image icons from the main menu and then add the following custom CSS code that adds woodmart-font font icons to each main menu item.

.wd-nav-main > li > a:before {
	font-family: "woodmart-font";
	font-weight: 400;
	margin-inline-end: 7px;
}

/* SHOP MENU ITEM */

.wd-nav-main > .menu-item-15578 > a:before {
	content: "\f146";
}

/* ABOUT US MENU ITEM */

.wd-nav-main > .menu-item-15748 > a:before {
	content: "\f124";
}

/* CONTACT MENU ITEM */

.wd-nav-main > .menu-item-15749 > a:before {
	content: "\f125";
}

If you want to set another icon from woodmart-font, navigate to the Theme settings => Typography => Icon fonts, copy the code of the desired icon (https://prnt.sc/VlkDsj2klr0k), and paste it to the corresponding menu item in the provided custom CSS code (https://prnt.sc/Ac0Ns1l1fWBH).

Kind Regards

Thank you Bogdan!

I am unsure about how to add the icon in the menu setting. Which colum do i add it to and what to write in order to get it in?

Sorry, but I didn’t quite understand your question. If you mean usage of previous custom code, it needed to be placed inside Custom CSS area in Theme Settings.

Kind Regards

Sorry for not clarifying enough.

I’m talking about when I’m going to put the icons into my header by the wordpress menu settings(Appearence -> menus). How do i write in the names of the icons into those menus?

As I mentioned in one of the previous replies (#556567), WoodMart font is a utility font, and it can’t be directly used in site menus via options. If you want to use WoodMart icon font in your main menu, you need to use the custom CSS code provided in this reply (#556714). Code needs to be placed inside the Custom CSS area in Theme Settings.

Kind Regards

Hello Bogdan,

Can you provide me with a CSS code to make the dark colorsheme for normal header(not stick). Just like you did for light scheme stick menu in #556237. Just i need it for darkmode non stick.

I hope it makes sense.

Hello,

Your site is currently under maintenance mode, in order to prepare the correct custom code and test it, we need to see your site first. Turn off maintenance mode or provide admin access credentials so we can log in and see your header.

Kind Regards

You can check now.

Hi,

I have checked your site and don’t quite understand what you want to achieve, if you wish to change color-scheme of your header you can change it via regular header row settings (Screenshot https://prnt.sc/6xA3RkmwoAA4).

Your site has different header designs on various pages. The homepage header (https://prnt.sc/3Ub_XCoG8Yw_) color-scheme can be changed from light to dark via color-scheme option and the non-homepage header (https://prnt.sc/F-CXJEDNSRJL) already has dark color-scheme enabled and the purpose of its customization is not clear. Please explain your issue in more detail with screenshots or video, and provide a link to the page with the exact header you want to change.

Kind Regards

I understand your confusion. Thank you for responding.

I am talking about the non-homepage header, which has the dark colorscheme, but i would like it to be another color instead of black. https://prnt.sc/F-CXJEDNSRJL

I hope this solved the confusion.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings. You can change color values inside the code to the desired one.

/* DARK HEADER NAVIGATION & CHEVRON COLORS */

.whb-color-dark .wd-nav[class*="wd-style-"]>li>a {
	--nav-color: blue;
	--nav-color-hover: red;
	--nav-color-active: orange;
	--nav-chevron-color: blue;
}

/* DARK HEADER ACTION BUTTONS */

.whb-color-dark .wd-tools-element > a {
	--wd-header-el-color: blue;
	--wd-header-el-color-hover: red;
}

Kind Regards

[Author]

Posts