Maintaining Active Navigation Page Colour/Underline while viewing Non-Linked Pages

Is there any way to maintain the colour or the underline (showing that a navigation page is active or currently being viewed) when links on this page then move traffic to a NON-LINKED PAGE? Currently my navigation page returns to its original colour and it is not clear that the non-linked pages are a subset of the "Work" page in the navigation menu.

Same happens to me. You should keep and see if you have Squarespace 7.0 or 7.1 . Indeed, features are different on each version. 

If you share site url, we can check problem easier

Hi Tuanphan - I thought I had already shared it in the original post - here it is https://johnmcphillips.com

Thank you!

8 hours ago, jackmackdaddy said:

Hi Tuanphan - I thought I had already shared it in the original post - here it is https://johnmcphillips.com

 

Thank you!

You mean when users are on these page >>> Underline Work item?

Yes, exactly what I'm after! And to keep the underlined "Work" colour (orange). Also is it possible to keep the Non-Linked on-screen page headers (Filter-All, Film/TV Drama, Comedy, Animation)  orange (#FF7800) while the user is active on those pages? Thank you so much.

Hi Tuanphan - any more thoughts on how I might resolve this?

Thanks

On 5/30/2024 at 3:28 AM, jackmackdaddy said:

Hi Tuanphan - any more thoughts on how I might resolve this?

Thanks

You need to edit 3 pages: 

https://www.johnmcphillips.com/work-film/tvdrama

https://www.johnmcphillips.com/work-comedy

https://www.johnmcphillips.com/work-animation

On each page > Add a Code Block > Paste this code to Code Block

<style>
  header#header [href="/work"] {
    color: #ff7800 !important;
}
</style>

That's great tuanphna, thank you! I also adapted the code to do the same thing for my "Contact" page however when I try to use it on my "Home" page it doesn't work. When I try:

<style>
  header#header [href="/home"] {
    color: #ff7800 !important;
}
</style>

Is it possible to have the Home Navigation page coloured orange without also having the Site Title and Logo field in orange too?

John 

On 5/31/2024 at 7:36 PM, jackmackdaddy said:

That's great tuanphna, thank you! I also adapted the code to do the same thing for my "Contact" page however when I try to use it on my "Home" page it doesn't work. When I try:

 

<style>
  header#header [href="/home"] {
    color: #ff7800 !important;
}
</style>

 

Is it possible to have the Home Navigation page coloured orange without also having the Site Title and Logo field in orange too?

 

John 

Use this

<style>
  header#header div.header-nav-item>a[href="/"], div.container.header-menu-nav-item>a[href="/"] {
    color: #ff7800 !important;
}
</style>