Change text colour based on url/page

Ask the community
,
1

I’m currently working on a custom menu inside a header.
The menu has options such as “home”, “products” etc…

I need to set up some code that changes the colour of a menu option depending on the page the user is currently on.

As an example, if I’m on the homepage, the “home” text in the menu has to be red, while all the other texts have to be black;
If I’m on the “products” page, the “products” text has to be red and all other texts have to be black.

If someone know how to set up this code, I’d very much appreciate your help. Thanks in advance!

2

Hello,

all properties belonging to —> TEXT, you will find here …
https://www.wix.com/corvid/reference/$w/text

You can use the html-command!

$w('#text18').html = "<h1 style='color:#F43F63'> Your Text in text18 </h1>";

If you would use the SEARCH-FUNCTION, you would find your solution within 5sec. :wink:

3

Hi, I’m not really sure if I made myself understood. I’m not just trying to change the text’s colour, but to change its colour based on the page I’m currently on.

I don’t know what to use to detect the url. I set up this code (which of course doesn’t work):

if (wixLocation.prefix === "home") {
    $w('#menuText1').html = "<h1 style='color:#F43F63'>Main Page</h1>";
} else {
    $w('#menuText1').html = "<h1 style='color:#000000'>Main Page</h1>";
}

I also checked posts related or similar to my question but didn’t find anything specific to my issue :confused:

4

@theredeng

Yes now you are in the right direction.
https://www.wix.com/corvid/reference/wix-location#top

In this link you will find all information you need how to generate your location-link.

Take a look at your URL than modify some code for it, to get the right value oth the URL.

This little example should help you understand thins a little bit better…

import wixLocation from 'wix-location';

$w.onReady(function () {
 let baseUrl =   wixLocation.baseUrl
 let url     =   wixLocation.url;
 let prefix  =   wixLocation.prefix
    console.log(baseUrl)
    console.log(url)
    console.log(prefix)
})

Go to your Preview-Mode in your editor and take a look onto your CONSOLE-OUTPUTs.
Then try to combine your code and this one together.

if (wixLocation.prefix === "home") {
    $w('#menuText1').html = "<h1 style='color:#F43F63'>Main Page</h1>";
} else {
    $w('#menuText1').html = "<h1 style='color:#000000'>Main Page</h1>";
}

And of course you need another event-trigger then —> onReady of the page!

This already looks like a first try of your solution.
Expand and modify this code. Work on it and get it to work!

$w.onReady(function () {
  $w('#HereYourButtonId').onClick(()=>{
 let baseUrl =   wixLocation.baseUrl
 let url     =   wixLocation.url;
 let prefix  =   wixLocation.prefix
    console.log(baseUrl)
    console.log(url)
    console.log(prefix)
 
 if (wixLocation.prefix === "home") {
        $w('#menuText1').html = "<h1 style='color:#F43F63'>Main Page</h1>";
    }
 else {
        $w('#menuText1').html = "<h1 style='color:#000000'>Main Page</h1>";
    }
  })
})

Good luck and happy coding.

5

@russian-dima That’s exactly what I needed. I tested it and it works. Thanks a lot!!

6

@theredeng
Don’t forget to like it, if you liked it :wink:

7

@russian-dima Check On My New Post, my friend !!

8

@ajithkrr
I will do when i will find more time.
There are also other user who need some help :wink: