Header Menu Text Color

[middlemann]

Hello,

What is the best way to make the color of the navigation menu text on the sticky header (desktop) change colors upon scroll.

Example, when all the way to the top of the page, the nav menu text is white with a transparent background and then upon scroll the sticky header background changes to white and the text changes to black.

---

[Support]

Normal State:

@media (min-width: 992px) {
    #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a,
	#header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a {
        color: #FFF;
    }
}

@media (min-width: 992px) {
    #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li:hover > a,
	#header .header-nav.header-nav-line.header-nav-light-text nav > ul > li:hover > a {
        color: #DE2A29;
    }
}

Stick Header (on scroll down)

@media (min-width: 992px) {
    html.sticky-header-active #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a,
	html.sticky-header-active #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a {
        color: #FFF;
    }
}

@media (min-width: 992px) {
    html.sticky-header-active #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li:hover > a,
	html.sticky-header-active #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li:hover > a {
        color: #DE2A29;
    }
}

---

[middlemann]

Hey guys, this code in my custom.cc doesn’t seem to be getting picked up; the default color in theme.css is getting priority.

/*Normal*/

@media (min-width: 992px) {
    #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a,
	#header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a {
        color: #fff !important;
    }
}
@media (min-width: 992px) {
    #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li:hover > a,
	#header .header-nav.header-nav-line.header-nav-light-text nav > ul > li:hover > a {
        color: #0080FF;
    }
}

/*Sticky*/

@media (min-width: 992px) {
    html.sticky-header-active #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a,
	html.sticky-header-active #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a {
        color: #000 !important;
    }
}

@media (min-width: 992px) {
    html.sticky-header-active #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li:hover > a,
	html.sticky-header-active #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li:hover > a {
        color: #0080FF;
    }
}

---

[Support]

Hi, it should be working but you can try this (it’s even more specific css rule):

@media (min-width: 992px) {
    html #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a,
	html #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a {
        color: #fff !important;
    }
}
@media (min-width: 992px) {
    html #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li:hover > a,
	html #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li:hover > a {
        color: #0080FF;
    }
}

@media (min-width: 992px) {
    html.sticky-header-active body #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li > a,
	html.sticky-header-active body #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li > a {
        color: #000 !important;
    }
}

@media (min-width: 992px) {
    html.sticky-header-active body #header .header-nav.header-nav-links.header-nav-light-text nav > ul > li:hover > a,
	html.sticky-header-active body #header .header-nav.header-nav-line.header-nav-light-text nav > ul > li:hover > a {
        color: #0080FF;
    }
}

Check if the rule is being used:

How to find which css is being applied to an element.

If the problem persists send me the URL of your site.

---

[middlemann]

still not working

---

[middlemann]

https://lightninglyrics.com

---

[middlemann]

https://lightninglyrics.com

---

[Support]

Hello, try this:

Put that at the top of the file css/custom.css:

@media (min-width: 992px) {
    #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a,
	#header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li > a {
        color: #FFF;
    }
	
    #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li:hover > a,
	#header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li:hover > a {
        color: #0080ff;
    }
}

@media (min-width: 992px) {
    html.sticky-header-active #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a,
	html.sticky-header-active #header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li > a {
        color: #000;
    }
	
    html.sticky-header-active #header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li:hover > a,
	html.sticky-header-active #header .header-nav.header-nav-line:not(.header-nav-light-text) nav > ul > li:hover > a {
        color: #0080ff;
    }
}

---

[middlemann]

Awesome – that worked!!
Any way to change the color of the logo too when the header is sticky?

---

[Support]

You can find an example where the logo on sticky header changes in this link: https://www.okler.net/previews/porto/12.1.0/feature-headers-sticky-change-logo.html

---

[middlemann]

That works pretty nice.
It messed up the top margin though of the logo on sticky mode though for some reason
Not sure exactly which class you guys are using to effect that.

---

[Support]

You can use this to set the margin:

html.sticky-header-enabled.sticky-header-active #header .header-logo-sticky-change .header-logo-sticky {
    margin-top: 18px;
}

---

[middlemann]

works nice.
now the default header state top margin is too much though and i didn’t change anything there. the menu links are too low on page
see: https://lightninglyrics.com

---

[Author]

Posts