Jump to content

Bold active navigation selection

Recommended Posts

  • Replies 23
  • Created
  • Last Reply

Top Posters In This Topic

3 hours ago, TrentNader said:

add to home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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....

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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....

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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 😎

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
18 hours ago, espencer said:

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

 

can you share site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
20 hours ago, espencer said:

www.ewenspencer.com 

thanks.

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

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!

Edited by csegurson
Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.