Jump to content

Code to keep the stretchy navigation line shown on my navigation menu without hover

Recommended Posts

Site URL: https://www.amandachung.ca/

Hi all!

I tried to find a snippet of code to highlight the current page in my navigation bar as it's a little confusing at the moment.

For now, when I hover over specific pages - it shows a beige line to highlight your selection before clicking, but once you land on the page it doesn't specify which page you're currently on.

Is there a way that I could have the stretchy navigation line stay when the viewer is on the page? Or even just simply bold the selection?

Edited by amchu
Changed wording.
Link to comment

Hello! You can use the following CSS rule to keep the underline when on a specific page. I commented out the bold rule in case you want to use it since you also mentioned that as a possibility. Add this to Design > CSS

.header-nav-item--active:after {
    width: 100%;
    /*font-weight: bold;*/
}

 

Edited by Caroline_Smith
Link to comment
On 3/3/2022 at 5:26 PM, Caroline_Smith said:

Hello! You can use the following CSS rule to keep the underline when on a specific page. I commented out the bold rule in case you want to use it since you also mentioned that as a possibility. Add this to Design > CSS

.header-nav-item--active:after {
    width: 100%;
    /*font-weight: bold;*/
}

 

Thank you! This worked 🙂 I appreciate it!!

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.