caws_93 Posted June 18 Posted June 18 (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 Edited June 18 by caws_93
tuanphan Posted June 20 Posted June 20 Page Title, you mean this red text? 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!)
caws_93 Posted June 20 Author Posted June 20 11 hours ago, tuanphan said: Page Title, you mean this red text? 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.
Solution tuanphan Posted June 22 Solution Posted June 22 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. 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!)
caws_93 Posted June 24 Author Posted June 24 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!
annahou Posted September 23 Posted September 23 (edited) 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 Edited September 23 by annahou elaborate
tuanphan Posted September 24 Posted September 24 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 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment