Altitude Header – Change the color when scrolled

[mattcarr007Member]

Hi All

I am working with the Altitude theme at the moment and am having problems with making changes to the header.

When the website opens i want it in the default setup of a transparent header with white font in the navigation menu.
But when it is scrolled down by the visitor, I would like the header to change to an Orange color (not the default black) and have the navigation menu in Blue.

I have found something very similar at http://dustn.tv/ but in this site they use a white header background with a dark grey navigation menu font.

Is this something achievable with the style.css or is it more complex?
I have tried several times with firebug to analyze the code but whatever it is I am not getting it so hence my request for help here.

I would really appreciate any assistance in what coding that needs changing and/or adding.
Because i am changing an existing website to this theme, I am working 'local' so cannot give you a URL

Many thanks in advance
Matt

http://local

[ellenstevensMember]

Matt:

Try looking on your style.css file for code similar to:

.site-header.dark {
background-color: #fff;
color: #000;
}

(In Altitude Pro, .site-header .dark is the second menu when you scroll down. The initial menu code is labeled .site-header.)

I would go to http://www.w3schools.com/tags/ref_colorpicker.asp? to find your preferred orange and blue shade and change out the colors in the above code. For example:

.site-header.dark {
background-color: #D2691E;
color: #4775A3;
}

Hope that helps.

[mattcarr007Member]

Hi Ellen

Thanks so much for your reply, that has certainly got the header color change correct and the way i wanted it to look.

Just one thing however, with the code that you kindly advised me to edit, the navigation menu font color doesn't change.
The font remains white when i scroll down and I was hoping that it would change to the #4775A3 blue color.

Have i miss-understood or is this a different section that needs editing?

Your help is greatly appreciated,
Kind regards
Matt

[ellenstevensMember]

Matt,

I can't see your code, so I'm shooting in the dark here. Look for these two areas to change the title font and menu font:

Initial Font Appearance:

.site-header {
background-color: #fff;
color: #000;
}

Scroll Down Font Appearance:

.site-header.dark {
background-color: #D2691E;
color: #4775A3;
}

[mattcarr007Member]

Hi Ellen

Sorry I have just read through your response again and then realized where I was going wrong withe the navigation menu font color.

You had pointed me exactly in the right direction in your first sentence but just changed the one bit of code and didn't look for the rest that i needed to.

I found that if followed your advice about looking for .site-header .dark and then I also changed the following bit of style.css code, I got exactly the effect that I was after with the navigation menu font color changing when i scroll:

.site-header.dark .genesis-nav-menu a {
	color: #4775A3;
	padding: 20px 15px;
}

Thanks again for your great advice, I really do appreciate it.
Kind regards
Matt

[cubicle10Member]

Thanks @ellenstevens!

---

E.J.
Cubicle10

[Author]

Posts