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

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?

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;*/
}

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