Jump to content

[Share] Custom Code - Navigation Link Color/Hover Color/Active Color

Recommended Posts

5 hours ago, ssommer101 said:

Hiya! 

I am looking to adjust the secondary nav for Burke, any suggestions

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
  • 1 month later...

Hi @tuanphan--

 

I am having the same problem as some of the others.. my navigation menu items (sub-sections) are also highlighted and I only want the page I am on to be highlighted. How can I fix this? Thanks. 

 

So far I have this pasted into my CUSTOM CSS:
 

Quote

/* Nav item color */
.header-nav-item a {
    color: black !important; 
}
/* Nav item hover color */
.header-nav-item>a:hover {
    color: black !important;
}
.header-nav-folder-item:hover a {
    color: #F92F00 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #F92F00 !important;
}

 

Thank you so much for all your help! You are a god send. 

 

Best,

Grace

Screen Shot 2020-09-14 at 9.58.51 AM.png

Link to comment
4 hours ago, gracejung said:

Hi @tuanphan--

 

I am having the same problem as some of the others.. my navigation menu items (sub-sections) are also highlighted and I only want the page I am on to be highlighted. How can I fix this? Thanks. 

 

So far I have this pasted into my CUSTOM CSS:
 

 

Thank you so much for all your help! You are a god send. 

 

Best,

Grace

Can you share site url? I can check 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 9/16/2020 at 2:44 AM, gracejung said:

@tuanphan

 

kumquat-sealion-xmy5.squarespace.com

 

It's created on the PAZARI template on Squarespace 7.1. Thank you!

Edit this code

.header-nav-item--active a {
    color: #f92f00 !important;
}

to this

.header-nav-item--active>a, .header-nav-folder-item--active a {
    color: #f92f00 !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
  • 3 weeks later...

Hey @tuanphan or anyone else really, maybe im missing it here but I don't see how to change the hover for normal a links. Im trying to change them in the footer with this

 

#footer-section a:hover {
  color: white !important;
}

 

Here's the link!

https://ukulele-chipmunk-wrjn.squarespace.com/

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

Link to comment
  • 1 month later...

Looking for guidance on this. I have used the following code to eliminate the underlines in my navigation and instead differentiate between active/inactive pages by color:
 

/* Remove underlines from nav items */
.header-nav-item--active a {
   background-image: none !important;
}
/* Nav item color, not active */
.header-nav-item a {
    color: #a3a3a3 !important;
}
/* Nav item color, on hover*/
.header-nav-item>a:hover {
    color: white !important;
}
.header-nav-folder-item:hover a {
    color: white !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: white !important;
}

This succeeds in achieving the desired effect, but it has an unintended consequence whereby any time I edit pages, I lose the cover images in the portfolio homepage. Anyone know based on this code why that side effect is happening?

Link to comment
On 12/4/2020 at 9:49 AM, OD_forum said:

Looking for guidance on this. I have used the following code to eliminate the underlines in my navigation and instead differentiate between active/inactive pages by color:
 


/* Remove underlines from nav items */
.header-nav-item--active a {
   background-image: none !important;
}
/* Nav item color, not active */
.header-nav-item a {
    color: #a3a3a3 !important;
}
/* Nav item color, on hover*/
.header-nav-item>a:hover {
    color: white !important;
}
.header-nav-folder-item:hover a {
    color: white !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: white !important;
}

This succeeds in achieving the desired effect, but it has an unintended consequence whereby any time I edit pages, I lose the cover images in the portfolio homepage. Anyone know based on this code why that side effect is happening?

Can you share site url? We can check 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 12/6/2020 at 5:11 PM, OD_forum said:

Sure, you can find the site at this link. On further inspection it may not in fact be related to the CSS as I'm getting the same error when I remove it (albeit slightly less frequently, strange), but feel free to take a look.

You can remove above code & add this code to Home > Settings > Advanced > Code Injection > Header

<style>
  /* Remove underlines from nav items */
.header-nav-item--active a {
   background-image: none !important;
}
/* Nav item color, not active */
.header-nav-item a {
    color: #a3a3a3 !important;
}
/* Nav item color, on hover*/
.header-nav-item>a:hover {
    color: white !important;
}
.header-nav-folder-item:hover a {
    color: white !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: white !important;
}
</style>

 

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 month later...
On 11/1/2019 at 3:41 AM, tuanphan said:

(Updated: SS 7.1)

Some custom code (CSS) to change color

  • Navigation Link
  • Navigation Hover Link
  • Navigation Active Link

Do you have code to fix the Body Link Color? I'm using Wells 7.0. The Body Link Color is super light grey. I need it to be black but every time I use the Site Wide - Body Link Color menu button, pick a new color, it refuses to do so.  It also doesn't allow me to change the background color, which isn't of concern to me but it's also super light grey/white so the links in the body of my text are pretty much impossible to see. 

Edited by malloryruff
Link to comment
On 1/9/2021 at 4:36 AM, malloryruff said:

Do you have code to fix the Body Link Color? I'm using Wells 7.0. The Body Link Color is super light grey. I need it to be black but every time I use the Site Wide - Body Link Color menu button, pick a new color, it refuses to do so.  It also doesn't allow me to change the background color, which isn't of concern to me but it's also super light grey/white so the links in the body of my text are pretty much impossible to see. 

Hi. Can you share link to a page? I can check code 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
  • 3 weeks later...
On 1/26/2021 at 9:48 AM, Supremo said:

@tuanphan https://supremo-essential.squarespace.com

Hi, how do I have white navigation link, but when hover header becomes white back ground with black title text. (sitewide) white background with black navigation link, only becomes white navigation link when I have background photos wrapped around it. Thanks in advance Mr.Pha

Screen Shot 2021-01-27 at 12.47.13 AM.png

Screen Shot 2021-01-27 at 12.47.34 AM.png

Hi. Do you still need this?

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/2/2021 at 6:11 PM, els said:

Hi tuanphan, can you help me with my question?

 

Site URL: https://rabbit-bobcat-zbp2.squarespace.com

Password: edes
It's on squarespace 7.1

I would like the white menu text on top of all pages to turn into black as soon as you start scrolling down. Then I would like the menu background bar to be white. (For now it's black because otherwise you can't read the menu)

Add to Design > Custom CSS

/* Shrink header */
.shrink {
    background: white !important;
}
.shrink *:not(a.btn) {
    color: black !important;
}
.shrink .header-nav-folder-item a {
    color: white !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
  • 3 weeks later...

Hi tuanphan, 

Can I ask you again for help? Your code for the header menu from above works fine for all pages except one section: the blog pages and each blog post. Is it possible to make those menu's readable as well when one's scrolling? 

Website: cptnederland.nl (7.1)

Link to comment
On 2/27/2021 at 4:01 AM, els said:

Hi tuanphan, 

Can I ask you again for help? Your code for the header menu from above works fine for all pages except one section: the blog pages and each blog post. Is it possible to make those menu's readable as well when one's scrolling? 

Website: cptnederland.nl (7.1)

Hi. You mean change dropdown items color on blog page?

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

Yes. On every single blogpost. If you scroll down and then hover over the menu you cannot read the submenu now, because it's white on white.

On the rest of the site I used the black minimal theme in the header. Here I cannot do that, for it will make the entire background of the blogposts black. 

I would prefer it if the submenu "box" turns black with white text if you scroll down. Like the rest of the site. 

Would that be possible? 

Edited by els
forgot a few words
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.