Website Page Tabs Colour Consistency

  • 1
  • Question
  • Updated 10 years ago
  • Answered
Something I've noticed with the menu page tabs of my site is that the tabs change colour from pink to purple for the menu page that the user has selected. This is good as it helps the user see which main section of the site they are in.


Should they select any sub-page within that section, the tab colour reverts to pink, and they lose the instant ability to see which main section they're in. Not so good and a design flaw.

Is there a way to adjust this so that the menu tab colour stays highlighted (purple) for subpages of a section, and not just the initial menu pages?

Go to to see what I'm talking about.

Photo of Paul Caspall

Paul Caspall

  • 174 Posts
  • 4 Reply Likes
  • keen to improve this

Posted 10 years ago

  • 1
Photo of Sanja


  • 10698 Posts
  • 495 Reply Likes
Hello Paul

Unfortunately, I don't believe there is a way to do this presently. I can see how this idea would be useful though. I will certainly pass this onto our development team for further consideration.

Perhaps others may be able to come up with alternative ideas that may work.
Photo of Paul Caspall

Paul Caspall

  • 174 Posts
  • 4 Reply Likes
Hi Sanja

Could you mention it to 'the_Pete'?
I'm pretty confident he could find a solution in the CSS coding for that particular Style, and possibly others. He's already onto a solution for my banner loading last via the code...

Photo of the_pete


  • 65 Posts
  • 16 Reply Likes
Hey Paul

This is not possible at the moment.

The reason is that at the moment we highlight a menu item based on a test. The test is basically "is the link of the menu item = the url of the page you're on". When you're on a sub page the url isn't the same as link... so it doesn't light up.

We don't currently store any information about what pages are sub pages of other pages and so we can't do a test to highlight a menu based on a sub-page. There are plans floating around the Yolasphere to do this though.

The idea is, in your Site Manager, you would drag one page under another (or some similar action) to specify that one page is a sub page of another. We would then use this information in tests to high-light menu items appropriately and even display send tiers of menus.

So you could have menu's like...

1) Bracelets
1.1) Pandora Style
1.2) Formal
1.3) Silver

These sub items might only show up in the navigation once you clicked 'Bracelets'.

There are elaborate javascript hacks that can be performed to highlight menu items that don't link to the current page. You're welcome to try using this script which you'll have to include and modify on each page that needs to have a menu item highlighted.

Just change "bracelets.php" to whatever the name of the page the link item you would like to highlight links to. This solution should work, but is a real hassle to add to all your pages. What we plan to add in the future would mean that it would happen automatically.

Use at your own risk.

<script type='text/javascript'>

var the_link_you_want_to_select = "bracelets.php";

for (var i = 0; i < document.getElementsByTagName("a").length; i++){
link = document.getElementsByTagName("a")[i];
href = link.href.split("/")[link.href.split("/").length - 1]
if(link.parentNode && link.parentNode.nodeName.toLowerCase() == 'li' && href == the_link_you_want_to_select){
link.parentNode.className = 'current_page_item';

Photo of Paul Caspall

Paul Caspall

  • 174 Posts
  • 4 Reply Likes
Err . . . maybe not.

I think I'll sit on this one for a bit longer...

Thanks for trying though.