Jump to content

How to keep page title highlighted on navigation bar

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)

I'm looking for a CSS code that will highlight the page title in the navigation bar while on said page. To give you a visual idea, I attached a photo of one of the web pages onto this post. As you can see in the image, I'm on the "About" page, and would like that word on the navigation bar highlighted yellow, while visitors scroll through the page. For now, it only highlights the word when the mouse is over it.

Website: carloswagenersobrero.com

If you need the yellow hex # to put into the code, it's #FFEAB0

Screenshot 2024-06-18 at 4.49.24 PM.png

Edited by caws_93
  • Replies 6
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

Posted
11 hours ago, tuanphan said:

Page Title, you mean this red text?

image.thumb.png.1a2a7710c654f77a8b17877f6b11902f.png

Sorry @tuanphan, I meant in the navigation bar (I attached a better photo, just in case). Right now, it only turns yellow when you hover over it. I would like it to stay yellow, while visitors navigate the page.

Screenshot 2024-06-20 at 2.49.57 PM.png

  • Solution
Posted
On 6/21/2024 at 2:54 AM, caws_93 said:

Sorry @tuanphan, I meant in the navigation bar (I attached a better photo, just in case). Right now, it only turns yellow when you hover over it. I would like it to stay yellow, while visitors navigate the page.

Screenshot 2024-06-20 at 2.49.57 PM.png

You can use this code to Website Tools (under Not Linked) > Custom CSS

div.header-nav-item--active>a {
    color: #ffeab0 !important;
}

 

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!)

Posted
On 6/22/2024 at 3:51 AM, tuanphan said:

You can use this code to Website Tools (under Not Linked) > Custom CSS

div.header-nav-item--active>a {
    color: #ffeab0 !important;
}

 

Thank you @tuanphan , that did it!

  • 2 months later...
Posted
10 hours ago, annahou said:

Hi @tuanphan I have tried this code to highlight the navigation active link while visitors scroll through the clicked page but it didn't work for my site. It still only highlights the word when the mouse hovers over it. My website link is:   https://thewheelsofimpact.com/who-we-are image.png.63612bda0a017bef1317d62a1fb67e43.png

You can use this code to Website Tools > Custom CSS

#collection-66bf38474df90b3a8816c61e div.header-nav-item:nth-child(2)>a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    bottom: .1em;
    background-color: currentColor;
    transform: scalex(1);
    transform-origin: left;
    transition: transform .6s cubic-bezier(.19,1,.22,1);
}

 

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!)

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.