Jump to content

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

Go to solution Solved by jackmackdaddy,

Recommended Posts

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.

Link to comment
  • Replies 10
  • Views 781
  • Created
  • Last Reply

Top Posters In This Topic

Posted (edited)

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.

Edited by jackmackdaddy
Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.