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

Hiya! 

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

5 hours ago, ssommer101 said:

Hiya! 

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

Can you share site url?

goby-iris-zygd.squarespace.com

@ssommer101 the site is private you'll need to set a site password

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

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

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

On 9/14/2020 at 5:53 PM, tuanphan said:

Can you share site url? I can check easier

@tuanphan

kumquat-sealion-xmy5.squarespace.com

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

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

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/

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?

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

6 hours ago, tuanphan said:

Can you share site url? We can check easier

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.

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>

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. 

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

@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

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

Hi. Do you still need this?

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)

1 hour ago, tuanphan said:

Hi. Do you still need this?

I think I do, my question is similar, see below 

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

Thank you so much!!!! What do I owe you? 

16 hours ago, els said:

Thank you so much!!!! What do I owe you? 

We help free.

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)

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?

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?