How to use CSS to change menu items on one page?

Ask the community
, ,
1

From what I understand, Wix Studio only allows you to create a global css page. I need to change the color of the menu items on only one page though. The page is not published on the live site so I’m not sure how to even find the page ID. How do I apply the following css to only a single page?

.horizontal-menu__item-label {
color: grey;
}

2

Correct, the CSS is a global file.

When you say only one page, are we talking about the label of the current page being updated, or is there a specific page that should have custom CSS while the remaining pages shouldn’t have any CSS?

3

A specific page. The menu item text needs to remain white on all pages except for one, where it will be grey.

4

Awesome :slight_smile:

I’d probably approach this with a little bit of Velo. In the masterpage.js file, use wix-location-frontend to check the current page. If the current page is the one you want to apply the CSS to the menu on, then apply the class to the element using https://dev.wix.com/docs/velo/api-reference/$w/custom-class-list/add, else remove the class on pages that aren’t relevant - https://dev.wix.com/docs/velo/api-reference/$w/custom-class-list/remove

It would likely end up looking similar to this:

import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(() => {
	let path = wixLocationFrontend.path

	if (path[0] === "pagePath") {
		$w("#menu").customClassList.add("customClass")
	} else {
		$w("#menu").customClassList.remove("customClass")
	}
})
5

Thanks, in theory seems like a good approach. However, I’m unclear on how I would find the path for the page as it hasn’t been published on a live site yet. Any tips there?

6

The path is just whatever page it’s on.

For example:
https://www.example.com/event - the path is event
https://www.example.com/contact - the path is contact
https://www.example.com/services - the path is services

In the editor, you’ll find the path for the page here:

Screenshot 2024-07-12 at 12.19.13
Screenshot 2024-07-12 at 12.19.13829×693 54.4 KB

7

So I suppose I should have clarified that it’s the text color that I need to change, not the background of the text.

I’ve tried this approach and while it does seem to work for changing the background color, I cannot get it to change the text color itself. I can’t even use the properties and events tab to select the menu items. Any tips?

Thanks for your help so far btw

8

@noahlovell Just following up on this and seeing if you have any recommendations regarding my last reply

9

This should be setting the label color, no? I tested on a test site, unless I’m not following correctly.

If you have a link to the site/video/diagram of what you’re hoping to achieve, that would help point me in the right direction :slight_smile: