Change the colors of the header on specific pages

Ask the community
,
1

Hey,
I want to change the header colors (header BG and menu button) on 3 pages - can I make it with code?

2

Yes your wish is totaly possible.

To set color of the page-header, you will have to generate your code on the → MASTER-PAGE to be able to controll all your pages colors.

MASTER-PAGE-EXAMPLE-CODE:

$w.onReady(function () {
    $w('#header1').style.backgroundColor = "red";
});

Your next step will be to generate an IF-ELSE-QUERY…

if(...) {...} else {...}

to determine on which page you are at current time, using —> WIX-LOCATION

import wixLocation from 'wix-location';

$w.onReady(function () {
    //$w('#header1').style.backgroundColor = "red";
    let path = wixLocation.path;
    console.log(path);
});

Now put all parts together and generate your code, to determine on which page you currently are navigating and setting the pages specific color.

Good luck!

3

Thank you for your response. Is this an option in the regular editor?
Where can I find the master page? It’s my first time using Wixcode :slight_smile:
thank you!

4

First you will have to ACTIVATE THE DEV-MODE (DEVELOPER_MODE) in your Wix-Editor. Take a look on the given option-menu-panel on the top of your editor, you will find this option there.

After you have activated the DEV-MODE, you will be able to see and write CODE.

Navigate to the page you want to add your CODE.

Once opened your wanted page, you will find an already prepared little example-code, which can be found on every new created page of your site.

Something like …

$w.onReady(()=>{
	...your code here....
	...your code here....
	...your code here....
	...your code here....
});

Here you can start to create all your wanted features and functions by writing CODE.