Bold active navigation selection

Hi all,

I was wondering if anyone could help with some css that would make the text bold for the current navigation selection.

Thanks in advance!

Can you share link to your site?

https://www.trentnader.com/

@tuanphan

3 hours ago, TrentNader said:

https://www.trentnader.com/

@tuanphan

add to home > Design > Custom CSS

a.Header-nav-item {
    font-weight: bold;
}

@tuanphan But is there a way for only the active page to be bold?

14 minutes ago, TrentNader said:

@tuanphan But is there a way for only the active page to be bold?

.Header-nav-item--active {
    font-weight: bold;
}

@tuanphan Thank you! Also is there a way to make it so the dividers between navigation links isnt affected by the active link? In other words, can the dividers not be "clickable"? 

5 minutes ago, TrentNader said:

@tuanphan Thank you! Also is there a way to make it so the dividers between navigation links isnt affected by the active link? In other words, can the dividers not be "clickable"? 

I have no idea now....

@tuanphanHaha no worries, last question for now 🙂 I saw on your website you had guide on how to display a cover image that appears before the website. How did you give that image a squarespace url? 

30 minutes ago, TrentNader said:

@tuanphanHaha no worries, last question for now 🙂 I saw on your website you had guide on how to display a cover image that appears before the website. How did you give that image a squarespace url? 

I don't quite understand your question....

@tuanphanFrom this link on your website(https://beaverhero.com/squarespace-image-loading-screen/) How do I create a url for a picture on my desktop to replace the image url you have in the code already?

8 minutes ago, TrentNader said:

@tuanphanFrom this link on your website(https://beaverhero.com/squarespace-image-loading-screen/) How do I create a url for a picture on my desktop to replace the image url you have in the code already?

Upload your picture to Squarespace & get url 😎

Hello, Im having trouble making my main navigation bold when active

18 hours ago, espencer said:

Hello, Im having trouble making my main navigation bold when active

 

can you share site url?

www.ewenspencer.com 

thanks.

20 hours ago, espencer said:

www.ewenspencer.com 

thanks.

 

Your site is private. You can setup password & share url. We can help easier

done

What is password?

its now public

14 hours ago, espencer said:

its now public

Add to Design > Custom CSS

li.active-link a {
    color: red !important;
}

Thanks, but the main navigation still is not bold when active.

On 2/9/2021 at 9:25 PM, espencer said:

Thanks, but the main navigation still is not bold when active.

Try new code

li.active-link a {
    font-weight: bold !important;
}

Hello, 

Thank you @tuanphan. Very helpful link. 

When I applied the code below to my site, it unfortunately, makes the entire folder and its contents bold (see projects > The Cuphead Show!) . Is there a way to fix it so that only the selected project within the folder is bold?

li.active-link a {
    font-weight: bold !important;
}

My site=  https://cosmosegurson.squarespace.com 

password = Hello!

Please let me know your thoughts, thank you!

On 4/28/2022 at 1:58 AM, csegurson said:

Hello, 

Thank you @tuanphan. Very helpful link. 

When I applied the code below to my site, it unfortunately, makes the entire folder and its contents bold (see projects > The Cuphead Show!) . Is there a way to fix it so that only the selected project within the folder is bold?

li.active-link a {
    font-weight: bold !important;
}

My site=  https://cosmosegurson.squarespace.com 

password = Hello!

Please let me know your thoughts, thank you!

Try this new code

li.active-link>a {
    font-weight: bold !important;
}

Can I extend this topic by asking how to apply making an active page bold in the Nav menu on mobile please? Currently I can only get it to work on desktop. 

Thanks